角组件中生命周期钩子的示例分析 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了角组件中生命周期钩子的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<>强角组件生命周期钩子

<人力资源/>

其中,红色标记的生命周期钩子只调用一次,绿色部分会被反复调用,执行顺序依次由上而下。

<强> ngOnChanges

当角设置数据绑定输入属性发生变化时响应,只对输入的不可变对象起作用。简单地讲就是,@Input标记的属性发生变化的时候被调用,非@Input标记的属性改变不会调用ngOnChanges。

<强> ngOnInit

在第一次ngOnChanges执行之后调用,并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。

<强> ngDoCheck

组件的输入属性发生变化时,将会触发ngDoCheck方法,我们可以使用该方法,自定义我们的检测逻辑。【相关推荐:《角教程》】

<强>注意:强不要在ngDoCheck里面做非常复杂的事情,使用时要比较精准的定义检查位置,否则会造成性能问题。因为任何变化,比如鼠标的点击事件或键盘的输入事件都会触发ngDoCheck。

<强>变更检测

<强>变更检测策略

<李>

默认策略
当组件树中有任何一个组件发生改变时,整个组件树都会被检测一遍。

<李>

onPush策略
当一个组件发生改变时,如果其子组件使用的是>//,.ts 文件中声明　　@ViewChild (& # 39; inputElem& # 39;) 　　inputElem: ElementRef;//,获取Dom元素的值　　const value =, this.inputElem.nativeElement.value;//,.html 文件中使用　　& lt; input nz-input 类型=皌ext", # inputElem>

<强> ngAfterContentInit和ngAfterContentChecked

这两个钩子是在投影内容装配完成之后执行的,而那个时候整个模板还没有装配完成,所以在这两个钩子里面可以修改被绑定的属性。

<>强投影

在某些情况下,需要动态改变组件模板的内容,而这些内容没有复杂的业务逻辑,也不需要重用,只是一小部分HTML片段,这个时候可以使用角提供的一个特性,叫做投影。在角里面可以使用ng-content指令将父组件模板中的任意片段投影到它的子组件上。

需要注意的是,自定义的组件的标签内部是不可以嵌套其他标签的,它不像一般的HTML标签可以嵌套,但可以使用投影实现嵌套。

<强> app.component.html

& lt; div 类=皐rapper"比; 　　& lt;才能h2>我是父组件& lt;/h2> 　　& lt;才能div>这个,div 定义在父组件& lt;/div> 　　& lt; !——,才能将要投影的内容写在子组件的标签之间,——比; 　　& lt;才能app-child> 　　,,,& lt; div 类=癶eader"在这个是页头。这个,div 是父组件投影到子组件的。你们;/div> 　　,,,& lt; div 类=癴ooter"在这个是页脚。;/div> 　　& lt;才能/app-child> 　　& lt;/div>

<强> child.component.html

& lt; div 类=皐rapper"比; 　　& lt;才能h2>这是子组件& lt;/h2> 　　& lt;才能!——,ng-content是投影点,——比; 　　& lt;才能ng-content 选择=?header"祝辞& lt;/ng-content> 　　& lt;才能div>这个div定义在子组件中& lt;/div> 　　& lt;才能ng-content 选择=?footer"祝辞& lt;/ng-content> 　　& lt;/div>

其中,使用<代码> 选择属性可以实现针对性的内容投影。但是,需要注意的是,<代码> 选择属性对应的值所指定的标签节点必须是组件下的<强>直接子节点强。否则,<代码>选择属性无效。

<强> ngAfterContentInit和ngAfterContentChecked小结

<李>

ngAfterContentInit和ngAfterContentChecked钩子在组件要投影的内容装配完毕以后才会被触发,ngAfterContentInit在ngAfterContentChecked之前被触发。

<李>

如果组件有子组件,父组件的这两个钩子先被触发,子组件的这两个钩子在父组件投影内容装配完毕后触发。

感谢你能够认真阅读完这篇文章,希望小编分享的“角组件中生命周期钩子的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!