Angular 学习日记 - 7 - 生命周期

简单做个图解

 建议在实现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()

组件销毁时触发。为了能看到组件被销毁，预先给该组件添加了一个删除按钮。

  ngOnDestroy() {
    console.log('OnDestroy Called');
  }