直接一张图，感受一下生命的可贵。—— 马丁路德.东

image.png

红色的方法只会调用一次，绿色的方法会多次调用

事件发生的顺序（注意构造函数被触发时，并没有数值参数传入）

初始化的逻辑推荐放在ngOninit（初始化），因为构造函数没有参数。

image.png

onDocheck变更检测机制，
onAfterContentInit,onAfterContentChecked:组件的内容投影相关。
onAfterViewInit,onAfterViewChecked:组件视图初始化，和变更。

1.介绍ngOnChangs

理解一个js数据类型的堆栈机制，基本数据类型，和引用数据类型。
当输入属性变化时进行触发（基本数据类型），虽然changs没有触发，但是组件的视图层还是会，发生改变，这说明有其他的钩子捕捉到它了。

2.变更检测机制，ngDocheck（由zong.js实现）单向改变（两个策略，一个是Default,一个是OnPush。Default一旦自己或孩子变更不然不会改变，检查所有，OnPush，一旦变更检查，自己和自己的孩子）

变更监测机制，使用的时候，小心使用（深层原理复杂，函数触发程度高，造成性能问题）check关键字

3 onAfterViewInit,onAfterViewChecked（高触发，禁止变更视图，除非放到另一个方法里，比如setTimeout）

先了解一个新方法，他可以让父组件调用子组件的方法。
1.子组件方法

image.png

2.父组件模板HTML

image.png

3.父组件控制器

image.png

4.父组件模板HTML直接调用

image.png

这两个钩子的调用顺序是（和教程结果不一样）

image.png

4.onAfterContentInit,onAfterContentChecked（被投影进来的内容组装完，调用的，可以变更视图）

了解一个新的概念组件投影（父组件投影带子组件）
语法：子组件html语法

image.png

父组件html语法

image.png

2.添加class,区分投影位置
父组件

image.png

子组件

image.png

3.添加属性绑定innerHTML（只能在浏览器中使用，不能再webAPP中使用）

image.png

控制器

image.png

onAfterContentInit,onAfterContentChecked被投影的组件完成时调用的。
执行顺序（和教程不一样）

image.png

5 ngOnDestroy

很简单当路由离开组件是就会被触发（组件被销毁）

image.png