Angular学习笔记06——钩子

166 阅读2分钟

##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 当路由的时候,由前一个组件跳转到另一个组件的时候,前一个路由进行销毁