6.5生命钩子

constructor（实例化对象） Onchanges （有输入属性时被调用,且输入属性为不可变参数）初始化输入属性 OnInit（初始化除输入属性外其他所有属性） DoCheck（做一次变更检测） 所有属性都应该被赋予该赋的值

渲染视图 AfterContentInit AfterContentChecked 子组件生命周期 AfterViewInit AfterViewChecked OnDestroy

变更检测 Onchanges DoCheck AfterContentChecked AfterViewChecked

组件销毁 路由跳转时销毁

Onchanges

父组件初始化子组件或修改子组件的输入参数（且输入属性为不可变参数）时调用

可变对象和不可变对象 javaScript中，字符串为不可变对象，对象为可变对象 console.log(JSON.strange(changes,null,2))

假如组件上绑定3个属性对象值，例如：

{current: SimpleChange}
{update: SimpleChange}
{markdownContent: SimpleChange}

只需要在属性“markdownContent”值发生变更时才执行。

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['markdownContent']) {
      this.markdownContent = changes['markdownContent'].currentValue;
    }
  }

变更检测和DoCheck钩子

zone.js负责变更检测，使原生的事件 组件属性的模板上

变更检测的2种策略 default策略：检测所有组件树 onPush策略：输入属性变化，才检测该组件及其子组件

根组件开始检测 DoCheck钩子 有事件发生就会促发 带Check关键字的钩子，必须轻量级，否则会影响性能

view钩子

viewChild装饰器 父组件调用子组件的方法

<app-child #child1><app-child>

控制器调用

@ViewChild("child1")
child1:ChildComponent;


this.child.greting("Tom")

模板调用

<button (click)="child2.greting('jerry')">

AfterViewInit

初始化时，数据和内容已组装完，且呈现给用户看之后被调用

AfterViewChecked

变更检测发生时，数据和内容已组装完，且呈现给用户看之后被调用

angular禁止在数据和内容已组装完，且呈现给用户看之后改变ui中绑定的值，会报错 使用setTImeout（（）=》{ ​ this.message="hello"; },0）; 解决

ngContent指令

父组件的任意片段投影到子组件上 投影 子组件

<ng-content select=".header"></ng-content>

父组件

<app-child>
<div class="header">投影</div>
</app-child>

浏览器专用

<div [inner-HTML]="divContent"></div>

AfterContentInit钩子

初始化时，被投影的内容组装完后被调用

AfterContentChecked钩子

变更检测时，被投影的内容组装完后被调用

先父后子

OnDestroy钩子

路由跳转时调用 常用于销毁资源，如反订阅一个流，清除定时器之类的

实战 unshift this.comment.unshift(comment)

参考文档

angular生命周期