Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

Angular 5.x Lifecycle Hooks Learn Note

Angular 5.x 生命周期钩子学习笔记

标签（空格分隔）： Angular

Note on cnblogs.com

---

3. 生命周期钩子

每个组件都有一个被ng管理的生命周期。

1. 组件生命周期钩子概览

指令和组件的实例都有一个生命周期钩子：新建、更新和销毁。
生命周期钩子接口在core库中。
每个生命周期钩子接口都有唯一的钩子方法，它们的命名是加ng前缀。

2. 生命周期的顺序

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

3. 接口是可选的

建议在TypeScript指令类中添加接口。

Angular的其它子系统除了有这些组件钩子外，还可能有他们自己的生命周期钩子，第三方库也可能会实现他们自己的钩子。

4. 生命周期练习

| 组件 | 描述 |
|: ------ |: ----- |
| Peek-a-boo | 展示每个生命周期钩子，每个钩子方法都会在屏幕上显示一条日志 |
| Spy | 指令同样有生命周期钩子，我们新建了一个SpyDirective，利用ngOnInit和ngOnDestroy钩子，在它所监视的每个元素被创建或销毁时输出日志。
本例把SpyDirective应用到父组件里的ngFor英雄重复器（repeater）的<div>里面。 |
| OnChanges | 这里将会看到：每当组件的输入属性发生变化时，Angular会如何以changes对象作为参数去调用ngOnChanges()钩子。展示了该如何理解和使用changes对象。 |
| DoCheck | 实现了一个ngDoCheck方法，它可以自定义变更检测逻辑。这里将会看到：Angular会用什么频度调用这个钩子，监视它的变化，并把这些变化输出成一条日志。|
| AfterView | 显示Anglar中的视图所指的是什么。演示了ngAfterViewInit和ngAfterViewChecked钩子。 |
| AfterContent | 展示如歌把外部内容投影进组件中，以及如何区分“投影进来的内容”和“组件的子视图”。演示了ngAfterContentInit和ngAfterContentChecked钩子。 |
| 计数器 | 演示了组件和指令的组合，他们各自有自己的钩子。在这个例子中，每当父组件递增它的输入属性counter时，CounterComponent就会通过ngOnChanges记录一条变更。同时，我们还把前一个例子中的SpyDirective用在ConterComponent上，来提供日志，可以同时观察到日志的创建和销毁过程。|

4.1 Peek-a-boo:全部钩子

PeekABooComponent组件演示了组件中所有可能存在的钩子。

• OnInit和OnDestroy

  • 就像对组件一样，Angular也会对指令调用这些钩子方法。
  • 一个侦探（SPY）指令可以让我们在无法直接修改DOM对象实现代码的情况下，透视其内部细节。显然，你不能修改一个原生<div>元素的实现代码，你同样不能修改第三方组件。但我们用一个指令就能监视它们了。

  侦探指令基本由ngOnInit()和ngOnDestroy钩子组成，它通过一个注入进来的LoggerService来把消息记录到父组件中去。