Angular Learning Diary-7-Life Cycle

Just make a simple illustration

 It is recommended that when implementing Angular  life cycle (LifeCycle Hooks) , it can be written behind the class implementation. This can not only make it easier for others to know which life cycle methods are used, but also can use vscode auto-completion to generate the method, and can also prevent misspelling of methods. Name (referring to myself) .

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

To put it simply 

1、with OnInit()

Fires after the constructor fires

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

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

 

2、withOnChanges()

When triggered, a SimpleChange type parameter will be automatically passed in. The HTML code is not important here, only the TS code is displayed.

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

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

  ...省略构造函数和OnInit方法...
}

The element printed here corresponds to the element attribute modified by @Input() in the TS file.

An interesting example:

Add a name attribute to the component, pass in element.name and use a button to modify its value.

The component code:

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>

Root component code:

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>

It is easy to find that the modification of name does not trigger the change of element. Because in memory, the element attribute still points to the same object, there is no change.

3、 ngDoCheck()

Provides a method to execute when change detection is run. Because DoCheck has many triggers, it is not suitable to execute too complex code, which will consume too many resources.

It is worth mentioning that Angular  change detection runs at the same frequency as DoCheck.

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

 

Because running in development mode, Angular has an extra detection cycle, so this is called twice.

4、ngAfterContentInit() 和 ngAfterContentChecked()

You can see that they are called after DoCheck, which makes sense since they are called after every change cycle.

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

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

5. ngAfterViewInit() and ngAfterViewChecked()

Obviously, they are called after content check

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

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

6、 ngOnDestory()

Fired when the component is destroyed. In order to see the component being destroyed, a delete button is added to the component in advance.

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