簡單做個(gè)圖解

?建議在實(shí)現(xiàn)Angular?生命周期（LifeCycle Hooks）時(shí)，可以寫在類實(shí)現(xiàn)的后面，既可以方便他人知曉用了哪些生命周期方法，又可以用vscode自動(dòng)補(bǔ)全來生成該方法，還可以防止拼錯(cuò)方法名（指我自己）。

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.');
  }
}

簡單講點(diǎn)?

1、ngOnInit()

在構(gòu)造函數(shù)觸發(fā)后觸發(fā)

  constructor() {
    console.log('Constructor Called');
  }

  ngOnInit(): void {
    console.log('OnInit Called');
  }

?

2、ngOnChanges()

觸發(fā)時(shí)會自動(dòng)傳入一個(gè)SimpleChange類型的參數(shù)，此處HTML代碼不重要，僅展示TS代碼

export class ServerComponent implements OnInit {
  @Input() element: { name: string; content: string; no: number };

  ngOnChanges(changes: SimpleChanges) {
    console.log('OnChanges Called', changes);
  }

  ...省略構(gòu)造函數(shù)和OnInit方法...
}

這里打印的 element 對應(yīng)的是TS文件中 @Input() 修飾的 element 屬性。

一個(gè)有意思的例子：

在該組件的基礎(chǔ)上加入一個(gè)name屬性，傳入element.name 并用一個(gè)按鈕來修改它的值。

該組件代碼：

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>

很容易發(fā)現(xiàn)，name的修改，并沒有觸發(fā) element 的變動(dòng)。因?yàn)樵趦?nèi)存中，element 屬性指向的還是同一個(gè)對象，沒有變化。

3、?ngDoCheck()

提供一個(gè)變更檢測運(yùn)行時(shí)執(zhí)行的方法。因?yàn)镈oCheck有很多觸發(fā)器，所以這里不適合去執(zhí)行太過復(fù)雜的代碼，會花費(fèi)太多資源。

值得一提的是Angular?變更檢測運(yùn)行的頻率和DoCheck的執(zhí)行頻率一致。

  ngDoCheck() {
    console.log('DoCheck Called');
  }

?

因?yàn)樵陂_發(fā)模式下運(yùn)行，Angular有一個(gè)額外的檢測周期，所以這里調(diào)用了兩次。

4、ngAfterContentInit() 和?ngAfterContentChecked()

可以看到它們在DoCheck之后調(diào)用，這是合理的，因?yàn)樗鼈冊诿總€(gè)變更周期后調(diào)用。

  ngAfterContentInit() {
    console.log('AfterContentInit Called');
  }

  ngAfterContentChecked() {
    console.log('AfterContentChecked Called');
  }

5、ngAfterViewInit() 和?ngAfterViewChecked()

顯而易見，它們在content check之后調(diào)用

  ngAfterViewInit() {
    console.log('AfterViewInit Called');
  }

  ngAfterViewChecked() {
    console.log('AfterViewChecked Called');
  }

6、?ngOnDestory()

組件銷毀時(shí)觸發(fā)。為了能看到組件被銷毀，預(yù)先給該組件添加了一個(gè)刪除按鈕。

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

?文章來源地址http://www.zghlxwxcb.cn/news/detail-765369.html

到了這里，關(guān)于Angular 學(xué)習(xí)日記 - 7 - 生命周期的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！