angular学习之路5-生命周期钩子

最新推荐文章于 2024-09-26 19:24:27 发布

你牛什么牛

最新推荐文章于 2024-09-26 19:24:27 发布

阅读量302

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/qq_24401529/article/details/93724150

版权

angular 专栏收录该内容

23 篇文章

订阅专栏

1，

指令和组件的实例有一个生命周期：当 Angular 新建、更新和销毁它们时触发。通过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。

每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。比如，OnInit 接口的钩子方法叫做 ngOnInit， Angular 在创建组件后立刻调用它，：

生命周期的顺序

当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

钩子	用途及时机
`ngOnChanges()`	当 Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 `SimpleChanges` 对象在 `ngOnInit()` 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
`ngOnInit()`	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 `ngOnChanges()` 完成之后调用，只调用一次。
`ngDoCheck()`	检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。在每个变更检测周期中，紧跟在 `ngOnChanges()` 和 `ngOnInit()` 后面调用。
`ngAfterContentInit()`	当 Angular 把外部内容投影进组件/指令的视图之后调用。第一次 `ngDoCheck()` 之后调用，只调用一次。
`ngAfterContentChecked()`	每当 Angular 完成被投影组件内容的变更检测之后调用。 `ngAfterContentInit()` 和每次 `ngDoCheck()` 之后调用
`ngAfterViewInit()`	当 Angular 初始化完组件视图及其子视图之后调用。第一次 `ngAfterContentChecked()` 之后调用，只调用一次。
`ngAfterViewChecked()`	每当 Angular 做完组件视图和子视图的变更检测之后调用。 `ngAfterViewInit()` 和每次 `ngAfterContentChecked()` 之后调用。
`ngOnDestroy()`	每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。在 Angular 销毁指令/组件之前调用。

//探测指令

// Spy on any element to which it is applied.
// Usage: <div mySpy>...</div>
@Directive({selector: '[mySpy]'})
export class SpyDirective implements OnInit, OnDestroy {

constructor(private logger: LoggerService) { }

ngOnInit() { this.logIt(`onInit`); }

ngOnDestroy() { this.logIt(`onDestroy`); }

private logIt(msg: string) {
this.logger.log(`Spy #${nextId++} ${msg}`);
}
}

你可以把这个侦探指令写到任何原生元素或组件元素上，它将与所在的组件同时初始化和销毁。下面是把它附加到用来重复显示英雄数据的这个 <div> 上。

OnInit()

使用 ngOnInit() 有两个原因：

在构造函数之后马上执行复杂的初始化逻辑
在 Angular 设置完输入属性之后，对该组件进行准备。

不要在组件的构造函数中获取数据？在测试环境下新建组件时或在你决定要显示它之前，不应该担心它会尝试联系远程服务器。构造函数中除了使用简单的值对局部变量进行初始化之外，什么都不应该做。

另外还要记住，在指令的构造函数完成之前，那些被绑定的输入属性还都没有值。如果你需要基于这些属性的值来初始化这个指令，这种情况就会出问题。而当 ngOnInit() 执行的时候，这些属性都已经被正确的赋值过了。

ngOnChanges() 方法是你访问这些属性的第一次机会。Angular 会在 ngOnInit() 之前调用 ngOnChanges()，之后还会调用很多次。但只会调用一次 ngOnInit()。

OnChanges()

一旦检测到该组件(或指令)的输入属性发生了变化，Angular 就会调用它的 ngOnChanges() 方法。本例监控 OnChanges 钩子。

ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
}
}