Angular--父子组件生命周期钩子(lifecycle hooks)执行过程
<h3>1.angular 组件生命周期钩子执行过程</h3><p> 组件初始化过程中，生命周期钩子执行顺序：</p>
<ol>
<li>constructor()构造函数,初始化class，(constructor不属于Angular生命周期钩子的范畴，这里只是说明组件组件初始化会先调用构造函数)。</li>
<li>ngOnChanges()--如果组件没有输入属性(@Input()),或者使用时没有提供任何输入属性，那么angular不会调用它；<strong>会调用多次</strong>。</li>
<li>ngOnInit()--只调用一次，一般用来初始化数据，如请求数据。</li>
<li>ngDoCheck()--紧跟在每次执行变更检测时的ngOnChanges()和首次执行变更检测的ngOnInit()后调用；<strong>会调用多次</strong>。</li>
<li>ngAfterContentInit()--当Angular把外部内容投影进组件视图或指令所在的视图之后调用，第一次ngDoCheck()之后调用，只调用一次。</li>
<li>ngAfterContentChecked()--每当Angular检查完被投影到组件或指令中的内容之后调用，在ngAfterContentInit()和每次ngDoCheck()之后调用，<strong>会调用多次</strong>。</li>
<li>ngAfterViewInit()--当Angular初始化玩玩组件视图及其子视图之后调用，只调用一次。</li>
<li>ngAfterViewChecked()--当Angular做完组件视图和子视图的变更检测之后调用；在ngAfterViewInit()和每次ngAfterContentChecked()之后调用，<strong>会调用多次</strong>。</li>
<li>ngOnDestroy()--当Angular每次销毁组件或指令之前调用并清扫。在这里取消订阅可观察对象和分离事件处理器，以防内存泄漏。</li>
</ol>
<p><img src="https://img2022.cnblogs.com/blog/1754447/202211/1754447-20221106233811232-2001802271.png"></p>
<p> </p>
<h3>2.angular 父子组件生命周期钩子过程</h3>
<p> 父子组件生命周期钩子执行顺序，如下图所示 </p>
<p> 1.首先调用父组件的构造函数，然后调用子组件的构造函数。</p>
<p> 2.当调用父组件的ngAfterContentChecked()钩子之后，会调用子组件的生命周期函数。</p>
<p> 3.子组件的ngAfterContentChecked()钩子执行完之后，会在调用子组件的子组件的生命周期钩子(如果有的话)。</p>
<p> 4.子组件执行ngAfterViewChecked()钩子后，父组件继续执行其余的生命周期钩子。</p>
<p> 5.当发生变更检测时，父组件先触发ngDoCheck() => ngAfterContentChecked()，然后子组件触发 ngOnChanges() => ngDoCheck() => ngAfterContentChecked() => ngAfterViewChecked(),最后父组件调用ngAfterViewChecked()。</p>
<p><img src="https://img2022.cnblogs.com/blog/1754447/202211/1754447-20221113163626651-1016861139.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/sparkler/p/16864656.html
頁:
[1]