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）,后一个被创建 。
相关学习链接
- angular4基础之组件生命周期（含代码） http://blog.csdn.net/fan2252228703/article/details/78116121
- angular开发者网站 http://www.ngfans.net/
- angular学习资源 http://www.ngfans.net/topic/5/%E9%95%87%E6%A5%BC-angular%E4%BC%98%E8%B4%A8%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%94%B6%E9%9B%86
- RxJS中文网站 http://cn.rx.js.org/
- angular4修仙之路 https://segmentfault.com/a/1190000008754631