简单做个图解
建议在实现Angular 生命周期（LifeCycle Hooks）时，可以写在类实现的后面，既可以方便他人知晓用了哪些生命周期方法，又可以用vscode自动补全来生成该方法，还可以防止拼错方法名（指我自己）。
import {
AfterContentChecked,
AfterContentInit,
AfterViewChecked,
AfterViewInit,
Component,
DoCheck,
OnChanges,
OnDestroy,
OnInit,
SimpleChanges,
} from '@angular/core';
export class ServerComponent
implements
OnInit,
OnChanges,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy
{
constructor() {}
ngOnInit(): void {
throw new Error('Method not implemented.');
}
ngOnChanges(changes: SimpleChanges): void {
throw new Error('Method not implemented.');
}
ngDoCheck(): void {
throw new Error('Method not implemented.');
}
ngAfterContentInit(): void {
throw new Error('Method not implemented.');
}
ngAfterContentChecked(): void {
throw new Error('Method not implemented.');
}
ngAfterViewInit(): void {
throw new Error('Method not implemented.');
}
ngAfterViewChecked(): void {
throw new Error('Method not implemented.');
}
ngOnDestroy(): void {
throw new Error('Method not implemented.');
}
}简单讲点
1、ngOnInit()
在构造函数触发后触发
constructor() {
console.log('Constructor Called');
}
ngOnInit(): void {
console.log('OnInit Called');
}
2、ngOnChanges()
触发时会自动传入一个SimpleChange类型的参数，此处HTML代码不重要，仅展示TS代码
export class ServerComponent implements OnInit {
@Input() element: { name: string; content: string; no: number };
ngOnChanges(changes: SimpleChanges) {
console.log('OnChanges Called', changes);
}
...省略构造函数和OnInit方法...
}
这里打印的 element 对应的是TS文件中 @Input() 修饰的 element 属性。
一个有意思的例子：
在该组件的基础上加入一个name属性，传入element.name 并用一个按钮来修改它的值。
该组件代码：
import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styleUrls: ['./server.component.css'],
})
export class ServerComponent implements OnInit {
@Input() element: { name: string; content: string; no: number };
@Input() name: string;
constructor() {
console.log('Constructor Called');
}
ngOnChanges(changes: SimpleChanges) {
console.log('OnChanges Called', changes);
}
ngOnInit(): void {
console.log('OnInit Called');
}
}
<div class="panel panel-primary">
<div class="panel-heading">{{ element.name }}</div>
<div class="panel-body">
<p>
<strong *ngIf="element.no % 2 === 0" style="color: red">{{
element.content
}}</strong>
<em *ngIf="element.no % 2 === 1" style="background-color: red">{{
element.content
}}</em>
</p>
</div>
</div>
根组件代码：
export class ServersComponent implements OnInit {
servers = [{ name: 'server1', content: 'Test server 1', no: 1 }];
onChangeFirstName() {
this.servers[0].name = 'Changed!';
}
...省略无用部分...
}
...省略无用部分...
<button class="btn btn-primary" (click)="onChangeFirstName()">
Change First Name
</button>
<hr />
<div *ngFor="let server of servers">
<app-server [element]="server" [name]="server.name"></app-server>
</div>很容易发现，name的修改，并没有触发 element 的变动。因为在内存中，element 属性指向的还是同一个对象，没有变化。
3、 ngDoCheck()
提供一个变更检测运行时执行的方法。因为DoCheck有很多触发器，所以这里不适合去执行太过复杂的代码，会花费太多资源。
值得一提的是Angular 变更检测运行的频率和DoCheck的执行频率一致。
ngDoCheck() {
console.log('DoCheck Called');
}
因为在开发模式下运行，Angular有一个额外的检测周期，所以这里调用了两次。
4、ngAfterContentInit() 和 ngAfterContentChecked()
可以看到它们在DoCheck之后调用，这是合理的，因为它们在每个变更周期后调用。
ngAfterContentInit() {
console.log('AfterContentInit Called');
}
ngAfterContentChecked() {
console.log('AfterContentChecked Called');
}
5、ngAfterViewInit() 和 ngAfterViewChecked()
显而易见，它们在content check之后调用
ngAfterViewInit() {
console.log('AfterViewInit Called');
}
ngAfterViewChecked() {
console.log('AfterViewChecked Called');
}
6、 ngOnDestory()
组件销毁时触发。为了能看到组件被销毁，预先给该组件添加了一个删除按钮。文章来源：https://www.toymoban.com/news/detail-765369.html
ngOnDestroy() {
console.log('OnDestroy Called');
}
文章来源地址https://www.toymoban.com/news/detail-765369.html
到了这里，关于Angular 学习日记 - 7 - 生命周期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Angular 基础] - 生命周期函数](https://imgs.yssmx.com/Uploads/2024/02/828160-1.png)
