AfterViewInit和AfterViewChecked钩子的实现和注意事项

AfterViewInit和AfterViewChecked这两个钩子是在组件模板所有的内容都被组装完成以后，组件的模板已经呈现给用户看了，这个动作完成以后，这两个方法才会被调用。

AfterViewInit方法会被先调用，AfterViewChecked方法会被后调用

注意点一
只有子组件视图的初始化和变更检测完毕后，父组件视图才开始初始化和变更检测，这也说明想要父组件视图想要完全组装好，那么子组件视图事先先被装好。
注意点二
AfterViewInit方法只会在初始化化完成以后调用一次，以后将不再调用
注意点三
AfterViewChecked方法在案例中的方法，在视图没有发生改变的时候也会被调用，所以使用此方法时需要尽可能的精简，以免出现性能问题
注意点四
在变更检测周期中，angular禁止在一个视图已经组装好之后再更新此视图，而AfterViewInit和AfterViewChecked这两个钩子就是在视图组件好之后触发的，所以在这两个方法中更新组件已经被绑定的属性来触发组件视图的变化，angular就是抛出异常，解决出问题的方法是把这个改变放到另一个时间循环内

下面这个案例可以帮助我们更好的理解，这个案例是基于上一篇ViewChild装饰器案例继续书写的

1.在app.component.ts内书写

export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
  @ViewChild("child1")
    child1: ChildComponent;
//声明一个变量
  massage: string;
  ngAfterViewInit(): void {
    console.log("父组件的视图初始化完毕");
    // 把改变放到另一个时间循环内
    setTimeout(() => {
      this.massage = "hello";
    },0);
  }
  ngAfterViewChecked(): void {
    console.log("父组件的视图变更检测完毕");
  }
  ngOnInit(): void {
    setInterval(() => {
      this.child1.greeting('Tom');
    },5000);
  }
}

2.在app.conponent.html上书写

<app-child #child1></app-child>
<app-child #child2></app-child>
<button (click)="child2.greeting('jerry')">调用child2的greeting方法</button>
{{massage}}

3.在子组件child.component.ts内书写

export class ChildComponent implements OnInit, AfterViewInit, AfterViewChecked {
  ngAfterViewInit(): void {
    console.log("子组件的视图初始化完毕");
  }
  ngAfterViewChecked(): void {
    console.log("子组件视图变更检测完毕");
  }
  constructor() { }
  greeting(name: string) {
    console.log( "hello" + name);
  }
  ngOnInit() {
  }
}

在控制台上可以看见组件实现的变化