小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
上文提到,我们可以通过 ng generate component <component-name>
命令来创建angular组件,在生成的ts文件中就可以使用各种生命周期钩子,关于Angular的生命周期钩子函数,解释最全的当然还是官方文档,这里只是大概的总结一下,借用一下网上的图:
虽然 ngOnInit()
作为初始化钩子,看起来应该是最先调用的,但其实有两个函数是更优先的,一个是constructor
和另一个是当组件有输入属性时的ngOnChanges
。
输入属性是带有Input()装饰器的属性,可以将父组件的数据带给子组件。
constructor()
每一个组件文件,本质上都是一个类,而constructor
是ES6引入类的概念后新出现的东西,是类的自身属性,所以并非Angular的钩子,constructor的主要作用是注入依赖,这里就不展开了。
举个例子,我们有一个子组件
import {
Component,
Input,
OnChanges,
OnInit,
SimpleChanges,
} from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css'],
})
export class ChildComponent implements OnInit, OnChanges {
@Input() firstName: string; // 输入属性
@Input() lastName: string; // 输入属性
age: number;
constructor() {
console.log('constructor');
}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
ngOnInit() {
console.log('ngOnInit');
}
}
在父组件中被调用
<app-child [firstName]="firstName"></app-child>
ngOnChanges()
如果组件绑定过输入属性,那么在
ngOnInit()
之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。 注意,如果你的组件没有输入属性,或者你使用它时没有提供任何输入属性,那么框架就不会调用ngOnChanges()
。
这个函数并非只调用一次,它会一直检测输入属性,当父组件的数据发生变化时,输入属性就会变化,angular就会再次调用,除非输入属性是是一个对象,改变值并不能改变引用地址。
ngOnInit()
在第一轮
ngOnChanges()
完成之后调用,只调用一次。而且即使没有调用过ngOnChanges()
,也仍然会调用ngOnInit()
(比如当模板中没有绑定任何输入属性时)。
通常我们在这里获取数据或者设置属性值
ngOnInit() {
this.getUserDataByAPIRequest();
this.setOtherData();
this.age = 18;
}
ngDoCheck()
不常用, 这个钩子主要用来手动检测被angular忽略的变化。一种用途可能是当你更改组件的ChangeDetectionStrategy时,但您知道对象的一个属性将更改。
这种情况不常见,如果是新手也没必要在这上面伤脑筋,只需要知道它会在ngOnInit()
和每次ngOnChanges()
之后调用。
ngAfterContentInit()
当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。 第一次
ngDoCheck()
之后调用,只调用一次。
这里主要解释一下**内容投影进** ,类似于vue的插槽,在子组件中使用<ng-content>
元素,就能允许在子组件标签中像html标签一样放置内容。
<div>
<p>Is content projection cool?</p>
</div>
<app-child>
<p>Is content projection cool?</p>
</app-child>
ngAfterContentChecked()
每当 Angular 检查完被投影到组件或指令中的内容之后调用。
ngAfterContentInit()
和每次ngDoCheck()
之后调用
剩下几个下次再写吧 ^^,angular这么小众,应该没人催更吧,哈哈