##angular生命周期钩子
1、constructor*
2、ngOnChanges
3、ngOnInit*
4、ngDoCheck
5、ngAfterContentInit*
6、ngAfterContentChecked
7、ngAfterViewInit*
8、ngAfterViewChecked
9、ngOnDestory*
加了*的钩子在组件生命周期中只执行一次。
1-8在组件初始化阶段依顺序执行。
###constructor
构造函数,只在初始化的时候执行一次。
###ngOnChanges 只在输入属性变换的时候会被调用,且只针对对象指向的地址发生变换的时候才调用。
###变更检测
所有事件都会触发事件检测机制。
angular中的组件实际是一个由app为根的dom树。
变更检测的时候,会从根DOM开始依序进行检测,从根DOM到父DOM到子DOM再到子子DOM等等等...
变更检测机制只在检测机制是default的时候如上执行,如果是onPush模式的话,则不会检测到onPush后面的子DOM。
###ngDoCheck
在每次执行“变更检测”时被调用。
由于可能会被大量调用,所有在使用它的时候需要仔细考虑。
###view钩子 ####父组件调用子组件的方法
<app-child #child1></app-child>
<app-child #child1></app-child>
<button (click)="child2.greeting('xxx')"></BUTTON>//在模板中进行子组件调用
@ViewChild('child1')//通过装饰器调用子组件
child1:ChildComponent;//子组件提供一个greeting方法
constructor(){}
ngOnInit():void{
this.child1.greeting("yyy");
}
####ngAfterViewInit和ngAfterViewChecked
ngAfterViewInit只执行一次。
这两个方法中不能直接进行绑定内容的变更来使视图进行变化。
都是在视图加载完成后调用。
###投影 子组件调用父组件中定义的模板:
<div>
<div>我是子组件</div>
<ng-content select=".top"></ng-content>
<div>子组件中的div</div>
<ng-content select=".bottom"></ng-content>
</div>
<div>
<div>我是父组件</div>
<div>fu组件中的div</div>
<app-child>
<div class="top">这是上面一个div{{xxxxx}}</div>//可以直接使用父组件中的属性值,但是却显示在子组件中
<div class="bottom">这是下面一个div</div>
</app-child>
</div>
####ngAfterContentInit和ngAfterContentChecked
类同于视图部分,在投影和投影变更检测时调用。
投影在视图钩子前调用。
可以在这两个钩子里面对绑定内容进行变更。
####ngOnDestory 当路由的时候,由前一个组件跳转到另一个组件的时候,前一个路由进行销毁