Angular4组件生命周期

• 钩子可以在特定的组件生命周期发生时执行所需要的业务逻辑，红框中的方法只会被调用一次，其余会被多次调用。
• 用户在组件初始化后看到组件，变更检测阶段会确保组件的属性与页面同步，如果由于路由等操作，组件从dom树上移除，那angular会执行组件的销毁阶段（变更检测中执行的方法与初始化是一个方法）。
• 创建一个新组件，在生成的组件上已经实现了OnInit接口，每一个钩子都是@angular/core这个库里定义的接口，每个接口都有唯一的钩子方法，方法名是接口名加ng前缀构成。
• 当一个组件被创建时，它的钩子函数首先被调用然后执行其他方法，构造函数是一定存在的，其它可以根据需求添加。

组件生命周期

• constructor：构造器函数，用于注入服务。
• ngOnChanges：当一个父组件修改或初始化一个子组件的输入属性时被调用。
• ngOnInit：组件初始化，通常会设置一些初始值。
• ngDoCheck：手动触发更新检查，在每个angular的变更检测周期中调用。
• ngAfterContentInit：内容初始化到组件之后。
• ngAfterContentChecked：内容变更检测之后。
• ngAfterViewInit：视图初始化之后。
• ngAfterViewChecked：视图发生变化检测之后，这个可以用来保证用户视图的及时更新。
• ngOnDestroy：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等。

变更检测和DoCheck钩子

• 在angular中，变更检测是由zone.js包来实现的，主要目的是保证组件的属性的变化和页面的变化是同步的，浏览器中发生的任何异步事件都会触发变更检测。
• 如何理解变更检测
  • 一个angular应用就是以主组件为根的组件树，当angular组件运行时，每一个组件都会生成属于它自己的变更检测器，当任何一个变更检测器检测到变化，zone.js就会根据组件的变更检测策略来检查组件，判断组件是否需要更新它的模板。
  • angular实现了两个变更检测策略，default和OnPush,默认情况下都是default,如果所有的组件都是default策略，不管变更发生在那个组件上，zone.js都会检查整个组件树，用OnPush就不会让它检查这个组件及其子组件。
• 注：ngDocheck方法在页面点击、获取焦点、改变输入等都会被触发，所以调用此方法是要写清楚判断，否则会增加不要的调用。

view钩子

• ViewChild装饰器
  
  ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法，使用ViewChild装饰器可以在父组件中获得一个子组件的引用。

1.在控制器上用TypeScripe代码

• 在父组件的.ts文件中

@ViewChild("child1")    //引用子组件
child1:ChildComponent;      //调用子组件对象

• 在父组件的.html文件中

<app-child #child1></app-child>    //#child1为模块本地变量

• 子组件的.ts文件中

greeting() {console.log("Hello");
}

2.在父组件模板上调用子组件方法

• 在父组件的.ts文件中

@ViewChild("child2")    //引用子组件
child2:ChildComponent;      //调用子组件对象

• 在父组件的.html文件中

<app-child #child2></app-child>    //#child2为模块本地变量
<button (click)="child2.greeting()">点击调用</button>

• 子组件的.ts文件中

greeting() {console.log("Hello");
}

带有After的钩子

ngAfterViewInit和ngAfterViewChecked


     1. 这两个方法是视图被组装好后触发的。先调用ngAfterViewInit，而且只在初始化完毕调用一次。

     2. 当子组件的初始化和变更完毕后，父组件的才开始调用。

     3. 在父组件中定义一个变量，然后在ngAfterViewInit和ngAfterViewChecked这两个方法中改变变量的值，将抛出异常，这是因为angular自身规定，在变更检测周期中，禁止在一个视图已经被组装好后再去更新这个视图，而ngAfterViewInit和ngAfterViewChecked是在视图被组装好后触发的。解决方法：

     把赋值语句写到一个setTimeout()方法中，让它在另一个JavaScript运行周期中运行。

setTimeout(() => {   this.message = "Hello";
},0);

ngAfterContentInit和ngAfterContentChecked

    与视图组装有关，针对父组件中投影进来的那部分内容。

投影

• 利用父组件做通用模板，然后各个子组件嵌套进去，实现自己的功能，例如做一个提示弹框，确认弹框等可以利用这个原理，在angular中有个投影的ng-content可以用在子组件中，父组件直接传递模板到子组件中。
• 写法
  
  第一步在子组件中需要被投影的那个组件中，用标记投影的位置。

<div style="border:3px solid red"><ng-content></ng-content>
</div>

第二步在父组件中调用子组件后，在子组件标签之间写一段html,这段html就会被投影过去。

<app-red-border><p>我应该在红框中</p>
</app-red-border>

• 若想将两段html内容投影到不同的框框内，只要给它们设定不同的class，在中添加相应的select属性。

<div style="border:3px solid red"><ng-content select=".red"></ng-content>
</div>
<div style="border:3px solid green"><ng-content select=".green"></ng-content>
</div>

<app-red-border><p class="red">我应该在红框中</p><p class="green">我应该在绿框中</p>
</app-red-border>

总体理解

• 初始化过程
  
      在前面的截图中，前四个方法在属性初始化阶段，constructor是实例化对象，ngOnChanges初始化输入属性，onOnInit初始化除输入属性之外的其它属性，然后ngDocheck做一次变更检查，这时，组件的所有属性都已被赋值，然后组件开始渲染视图，首先渲染投影进来的内容，渲染好后调用ngAfterContentInit和ngAfterContentChecked,若有子组件，则子组件初始化，组件视图组装完毕后调用ngAfterViewInit和ngAfterViewChecked,组件初始化结束。
• 说明
  • 页面呈现后，与用户交互，用户点击、输入等会触发变更检测机制，一旦有变化，带有check的方法都会被调用，如果当前变化导致组件的输入属性也改变了，组件的ngOnchanges也会被调用。
  • 当从一个路由地址跳转到另一个路由地址时，前一个路由地址对应的组件将被销毁（ngOnDestroy）,后一个被创建
    。

相关学习链接

1. angular4基础之组件生命周期（含代码）
   http://blog.csdn.net/fan2252228703/article/details/78116121
2. angular开发者网站 http://www.ngfans.net/
3. angular学习资源 http://www.ngfans.net/topic/5/镇楼-angular优质学习资源收集
4. RxJS中文网站 http://cn.rx.js.org/
5. angular4修仙之路 https://segmentfault.com/a/1190000008754631
6. 慕课网学习视频：https://coding.imooc.com/class/94.html