收获：

angular生命周期钩子

触发顺序从上往下

ngOnChanges()，当被input或output的数据变化时相应。

ngOnInit()，在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。只调用一次

ngDoCheck()，在Angular组件属性发生变化时响应。

ngAfterContentInit()，当Angular把外部内容投影进组件视图或指令所在的视图之后调用。只调用一次

ngAfterContentChecked()，当Angular投影的组件或指令中的内容变化之后调用。

ngAfterViewInit()，当Angular初始化完组件视图及其子视图或包含该指令的视图之后调用。只调用一次

ngAfterViewChecked()，当 Angular组件视图和子视图变化之后调用。

ngOnDestroy()，当 Angular每次销毁指令/组件之前调用。

内容投影

在子组件中，可以用<ng-content></ng-content>占位，等父组件传过来数据再显示

子组件html：

<div>

    <ng-content></ng-content>

</div>

父组件html：

<app-xxx>

父组件传过来的数据

</app-xxx>

子组件html变为：

<div>

    <p>父组件传过来的数据</p>

</div>

同样可以传多个数据，如：

子组件html：

<div>

    <ng-content select="span"></ng-content>

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

    <ng-content select="#ppp"></ng-content>

</div>

父组件html：

<app-xxx>

    <span>111</span>

    <div class="ooo">222</div>

    <div id="ppp">333</div> 

</app-xxx>

子组件变为：

<div>

    <span>111</span>

    <div>222</div>

    <div>333</div>

</div>

也可以嵌套别的组件

父组件html:

<app-xxx>

    <span>111</span>

    <app-yyy></app-yyy>

    <div id="ppp">333</div> 

</app-xxx>