Angular 中的生命周期函数
<div class="page" title="Page 1"><div class="layoutArea">
<div class="column">
<p><span style="font-size: 22pt; font-family: "SimSun"">一、 <span style="font-size: 22pt; font-family: "Calibri"; font-weight: bold">Angular<span style="font-size: 22pt; font-family: "SimSun"">中的生命周期函数 </span></span></span></p>
<p><span style="font-size: 10pt; font-family: "SimSun"">官方文档:<span style="font-size: 10pt; font-family: "Calibri"; color: rgba(0, 0, 255, 1)">https://www.angular.cn/guide/lifecycle-hooks <span style="font-size: 10pt; font-family: "SimSun"">生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。 </span></span></span></p>
<p><span style="font-size: 10pt; font-family: "SimSun"">当 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。 </span></span></span></p>
<p> </p>
<div class="page" title="Page 1">
<table style="border-collapse: collapse"><colgroup><col style="width: 39.356958%"><col style="width: 60.643042%"> </colgroup>
<tbody>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">constructor </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">构造函数中除了使用简单的值对局部变量进行初始化 之外，什么都不应该做。 (非生命周期函数) </span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">ngOnChanges() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">当 <span style="font-size: 10pt; font-family: "Calibri"">Angular<span style="font-size: 10pt; font-family: "SimSun"">(重新)设置数据绑定输入属性时响应。该 方法接受当前和上一属性值的 <span style="font-size: 10pt; font-family: "Calibri"">SimpleChanges <span style="font-size: 10pt; font-family: "SimSun"">对象 当被绑定的输入属性的值发生变化时调用，首次调用一 定会发生在 <span style="font-size: 10pt; font-family: "Calibri"">ngOnInit() <span style="font-size: 10pt; font-family: "SimSun"">之前。 </span></span></span></span></span></span></span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold; color: rgba(255, 0, 0, 1)">ngOnInit() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">在 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">第一次显示数据绑定和设置指令<span style="font-size: 10pt; font-family: "Calibri"">/<span style="font-size: 10pt; font-family: "SimSun"">组件的输 入属性之后，初始化指令<span style="font-size: 10pt; font-family: "Calibri"">/<span style="font-size: 10pt; font-family: "SimSun"">组件。<br>
在第一轮 <span style="font-size: 10pt; font-family: "Calibri"">ngOnChanges() <span style="font-size: 10pt; font-family: "SimSun"">完成之后调用，只调用一次。
</span></span></span></span></span></span></span></span></span></p>
<p><span style="font-size: 10pt; font-family: "SimSun"">使用 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">ngOnInit() <span style="font-size: 10pt; font-family: "SimSun"">有两个原因:
<span style="font-size: 10pt; font-family: "Calibri"">1<span style="font-size: 10pt; font-family: "SimSun"">、在构造函数之后马上执行复杂的初始化逻辑<br>
<span style="font-size: 10pt; font-family: "Calibri"">2<span style="font-size: 10pt; font-family: "SimSun"">、在 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">设置完输入属性之后，对该组件进行准
</span></span></span></span></span></span></span></span></span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<div class="page" title="Page 2">
<table style="border-collapse: collapse"><colgroup><col style="width: 39.356958%"><col style="width: 60.643042%">
</colgroup>
<tbody>
<tr>
<td style="border-top: 1.23pt solid rgba(0, 0, 0, 1); border-right: 0.48pt solid rgba(0, 0, 0, 1); border-bottom: 0.48pt solid rgba(0, 0, 0, 1); border-left: 0.48pt solid rgba(0, 0, 0, 1)"> </td>
<td style="border-top: 1.23pt solid rgba(0, 0, 0, 1); border-right: 0.48pt solid rgba(0, 0, 0, 1); border-bottom: 0.48pt solid rgba(0, 0, 0, 1); border-left: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<pre><span style="font-size: 10pt; font-family: "SimSun"">备。
有经验的开发者会认同组件的构建应该很便宜和安全。
</span></pre>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">ngDoCheck() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">检测，并在发生 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">无法或不愿意自己检测的变 化时作出反应。在每个 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">变更检测周期中调用， <span style="font-size: 10pt; font-family: "Calibri"">ngOnChanges() <span style="font-size: 10pt; font-family: "SimSun"">和 <span style="font-size: 10pt; font-family: "Calibri"">ngOnInit() <span style="font-size: 10pt; font-family: "SimSun"">之后。 </span></span></span></span></span></span></span></span></span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">ngAfterContentInit() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">当把内容投影进组件之后调用。第一次 <span style="font-size: 10pt; font-family: "Calibri"">ngDoCheck() <span style="font-size: 10pt; font-family: "SimSun"">之 后调用，只调用一次。 </span></span></span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">ngAfterContentChecked() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">每次完成被投影组件内容的变更检测之后调用。 <span style="font-size: 10pt; font-family: "Calibri"">ngAfterContentInit() <span style="font-size: 10pt; font-family: "SimSun"">和每次 <span style="font-size: 10pt; font-family: "Calibri"">ngDoCheck() <span style="font-size: 10pt; font-family: "SimSun"">之后调用。 </span></span></span></span></span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold; color: rgba(255, 0, 0, 1)">ngAfterViewInit() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">初始化完组件视图及其子视图之后调用。第一 次 <span style="font-size: 10pt; font-family: "Calibri"">ngAfterContentChecked() <span style="font-size: 10pt; font-family: "SimSun"">之后调用，只调用一次。 </span></span></span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">ngAfterViewChecked() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">每次做完组件视图和子视图的变更检测之后调用。 <span style="font-size: 10pt; font-family: "Calibri"">ngAfterViewInit()<span style="font-size: 10pt; font-family: "SimSun"">和每次 <span style="font-size: 10pt; font-family: "Calibri"">ngAfterContentChecked() <span style="font-size: 10pt; font-family: "SimSun"">之后 调用。 </span></span></span></span></span></p>
</div>
</div>
</td>
</tr>
<tr>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold; color: rgba(255, 0, 0, 1)">ngOnDestroy() </span></p>
</div>
</div>
</td>
<td style="border: 0.48pt solid rgba(0, 0, 0, 1)">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"">当 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">每次销毁指令<span style="font-size: 10pt; font-family: "Calibri"">/<span style="font-size: 10pt; font-family: "SimSun"">组件之前调用并清扫。在这 儿反订阅可观察对象和分离事件处理器，以防内存泄 漏。<br>
在 <span style="font-size: 10pt; font-family: "Calibri"">Angular <span style="font-size: 10pt; font-family: "SimSun"">销毁指令<span style="font-size: 10pt; font-family: "Calibri"">/<span style="font-size: 10pt; font-family: "SimSun"">组件之前调用。
</span></span></span></span></span></span></span></span></span></p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10901095.html
頁:
[1]