![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angular新版
文章平均质量分 51
Jqlender
这个作者很懒,什么都没留下…
展开
-
angular创建组件命令
ng generate component example 生成组件带有模版ng generate component example -it 生成内联模版(不会单独生成html文件)ng generate directive my-directive - 生成一个新指令ng generate pipe my-pipe - 生成一个新管道ng generate service my-service - 生成一个新服务ng generate route my-route - 生成一个新路由ng g原创 2022-02-11 17:57:40 · 3252 阅读 · 0 评论 -
angular新版 父组件修改子组件某个div样式
<!-- 父组件 father.html --><div class="wrapper"> <app-child></app-child></div><!-- 子组件 child.html --><div class="modal-header">123</div>方法一,在父组件样式文件中修改子组件样式.wrapper{ ::ng-deep { .modal-header{ col原创 2021-10-22 11:51:18 · 692 阅读 · 0 评论 -
RxJS库的.pipe(),.subscribe()
angular官方文档RxJS 库RxJS库官方文档RxJS库响应式编程是一种面向数据流和变更传播的异步编程范式(Wikipedia)。RxJS(响应式扩展的 JavaScript 版)是一个使用可观察对象进行响应式编程的库,它让组合异步代码和基于回调的代码变得更简单。RxJS 提供了一种对 Observable 类型的实现,直到 Observable 成为了 JavaScript 语言的一部分并且浏览器支持它之前,它都是必要的。这个库还提供了一些工具函数,用于创建和使用可观察对象。这些工具函数可用原创 2021-10-08 18:40:12 · 8636 阅读 · 0 评论 -
Angular特殊的选择器:host,:host-context,::ng-deep
angular文档:host 表示选择当前的组件。::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。:host-context 如果需要满足某条件才能应用样式,这个正好。它在当前组件宿主元素的祖先节点中查找 CSS 类,直到文档的根节点为止。如果找到,才会应该后面的样式到内部元素。:host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。//选择组件宿主元素原创 2021-10-03 20:33:23 · 1126 阅读 · 0 评论 -
@angular/core里的 NgZone -使得Angular不跟踪变化
前言:在模板中实时获取一个变量,模板中就频繁的更新显示,频繁的变动将造成性能损耗。或者在双向绑定时,异步事件的发生会导致组件中的数据变化,但是你想要适当时机再改变模板显示。一、NgZoneAngular为我们提供了NgZone服务,对于一些频繁的操作,可以不去触发变更检测。Angular环境内注册的异步事件都运行在这个NgZone上原理:NgZone是基于Zone来实现的,NgZone从Zone中fork了一份实例,是Zone派生出的一个子Zone,在Angular环境内注册的异步事件都运行在原创 2021-09-19 21:20:00 · 266 阅读 · 0 评论 -
angular生命周期钩子ngOnChanges-父组件使子组件输入属性值变化时触发
触发条件:父组件使子组件输入属性值变化时才会调用,子组件自己改变输入属性的值不会调用@input属性(输入属性)发生变化时,会调用当输入属性为对象时,当对象的属性值发生变化时,不会调用当对象的引用变化时会触发父组件//app.component.html<app-child [greeting]="greeting" [user]="user"></app-child><p> 问候语:<input type="text" [(ngModel)]原创 2021-09-19 15:19:45 · 700 阅读 · 0 评论 -
angular @ViewChild使用
通过@ViewChild获取子组件,得到子组件的值、调用子组件的方法//子组件child@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss']})export class Child{ public content::string = '123', public change(){ this.content =原创 2021-09-17 22:31:18 · 633 阅读 · 0 评论 -
angular中的依赖注入
依赖项是指某个类执行其功能所需的服务或对象。依赖项注入(DI)是一种设计模式,在这种设计模式中,类会从外部源请求依赖项而不是创建它们。Angular 的 DI 框架会在实例化某个类时为其提供依赖。你可以使用 Angular DI 来提高应用程序的灵活性和模块化程度。创建可注入服务://在 src/app/heroes 目录下生成一个新的 HeroService 类ng generate service heroes/hero注意:为了清晰和可维护性,建议你在单独的文件中定义组件和服务。如果你原创 2021-09-16 18:59:31 · 335 阅读 · 0 评论 -
angular ng-container
Angular 的 <ng-container> 是一个分组元素,它不会干扰样式或布局,因为 Angular 不会将其放置在 DOM 中。为没有DOM元素得指令安排宿主当没有单个元素承载指令时,可以使用 <ng-container>//使用 <ng-container> 的条件化段落<p>I turned the corner <ng-container *ngIf="hero">and saw {{hero.name}}. I wav原创 2021-09-13 18:11:29 · 583 阅读 · 0 评论 -
angular 指令
Angular 指令的不同类型如下:组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。内置指令内置属性型指令:常见的内置属性型指令作用NgClass添加和删除一组 CSS 类NgStyle添加和删除一组 HTML 样式NgModel将数据双向绑定添加到 HTML 表单元素内置结构型指令结构型指令的职责是原创 2021-09-12 22:05:00 · 2187 阅读 · 0 评论 -
angular 组件通信
父组件传值给子组件父组件绑定自定义属性,例如: [item]=“currentItem”;子组件通过**@input()**装饰器接收属性子组件触发父组件方法使用 EventEmitter 自定义事件:1.创建一个EventEmitter 并使用@Output()装饰器将其对外暴露为属性。2.调用EventEmitter.emit(data) 发出事件,传入数据3.父组件通过绑定到该属性来监听事件,并通过传入的$event对象接收数据//父组件<app-detail (dele原创 2021-09-12 20:33:58 · 90 阅读 · 0 评论 -
angular 模板
文本插值组件中的变量:{{data}}插值表达式:{{1+1}} {{1+getVal()}} 新的模板表达式运算符,例如 |,?. 和 !<p>{{title}}</p><ul> <li *ngFor="let itemof list">{{item.name}}</li></ul>不能使用那些具有或可能引发副作用的 JavaScript 表达式,包括:赋值 (=, +=, -=, …)运算符,比如 n原创 2021-09-11 20:02:53 · 1109 阅读 · 0 评论 -
新建angular-cli项目
全局安装Angular CLInpm install -g @angular/cli新建Angular CLI项目ng new my-project运行项目ng serve --open 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。–open(或者只用 -o 缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/ng serve -o如果默认端口 4200 不可用,则可以使用端口标志指定另一个端口:ng serve --port 4原创 2021-09-09 22:56:37 · 137 阅读 · 0 评论