angular-组件生命周期钩子

为什么80%的码农都做不了架构师？>>>   

angular的所有生命周期钩子

每个组件都有一个被 angular 管理的生命周期，angular 通过生命周期钩子把组件的重要时刻暴露出来，让我们在它们发生时采取某些行为。除了和视图/内容有关的生命周期钩子，指令有和组件一样的生命周期：创建->更新->销毁；如图：

通过实现一个或多个 Angular core  库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。例如：

export class PeekABoo implements OnInit {
  constructor(private logger: LoggerService) { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { this.logIt(`OnInit`); }

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

组件在创建之后，立刻调用 OnInit 接口的钩子方法：ngOnInit() ;

常见生命周期钩子

ngOnInit()钩子

使用 ngOnInit() 有下面两个原因：

1. 在构造函数之后马上执行复杂的初始化逻辑；

2. 在 angular 设置完输入属性后，马上对该组件进行准备；

   它是获取初始化数据的好时期，不过要注意，是在 constructor 之后，因为在这之前，绑定的输入属性还没有值，这时候没有初始化，当OnInit 执行的时候，那些属性都已经被正确的赋值过了。

ngOnChange()钩子

当检测到组件的输入属性即 Input 进来的属性发生了变化的时候，就会调用它的 ngOnChange() 钩子;

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}`);
  }
}

ngOnChange()方法获取了一个对象，它把每个发生变化的属性名都映射到了一个 SimpleChange 对象， 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。

ngOnDestroy() 钩子

一些清理逻辑必须放在指令销毁之前进行，这时可以把它放进ngOnDestroy()中.这里可以 里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方/取消那些对可观察对象和 DOM 事件的订阅/停止定时器/注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 可以避免内存泄露；

转载于:https://my.oschina.net/hyzccc/blog/1835130