Lifecycle Hooks Angular 2 - chuỗi vòng đời

 
Lifecycle-Hooks

Sau khi tạo một thành phần / chỉ thị bằng cách gọi hàm tạo của nó, Angular gọi các phương thức móc vòng đời trong chuỗi sau tại các thời điểm cụ thể:

Hook	Mục đích và thời gian
ngOnChanges()	Trả lời khi Góc (re) đặt thuộc tính đầu vào bị ràng buộc dữ liệu. Phương thức nhận SimpleChangesđối tượng của các giá trị thuộc tính hiện tại và trước đó. Được gọi trước ngOnInit()và bất cứ khi nào một hoặc nhiều thuộc tính đầu vào ràng buộc dữ liệu thay đổi.
ngOnInit()	Khởi tạo chỉ thị / thành phần sau khi Angular lần đầu tiên hiển thị các thuộc tính ràng buộc dữ liệu và thiết lập các thuộc tính đầu vào của thành phần của chỉ thị / thành phần. Được gọi một lần , sau lần đầu tiên ngOnChanges() .
ngDoCheck()	Phát hiện và hành động theo những thay đổi mà Angular không thể hoặc sẽ không tự phát hiện được. Được gọi trong mỗi lần phát hiện thay đổi, ngay lập tức sau ngOnChanges()và ngOnInit().
ngAfterContentInit()	Trả lời sau khi Angular chiếu nội dung bên ngoài vào khung nhìn của thành phần / khung nhìn mà chỉ thị có trong đó. Được gọi một lần sau lần đầu tiên ngDoCheck().
ngAfterContentChecked()	Trả lời sau khi Angular kiểm tra nội dung được chiếu vào chỉ thị / thành phần. Được gọi sau ngAfterContentInit()và sau đó ngDoCheck().
ngAfterViewInit()	Trả lời sau khi Angular khởi tạo các khung nhìn của thành phần và khung nhìn con / khung nhìn mà một chỉ thị có trong đó. Được gọi một lần sau lần đầu tiên ngAfterContentChecked().
ngAfterViewChecked()	Trả lời sau khi Angular kiểm tra các khung nhìn của thành phần và khung nhìn con / khung nhìn mà chỉ thị có trong đó. Được gọi sau ngAfterViewInitvà sau đó ngAfterContentChecked().
ngOnDestroy()	Dọn dẹp ngay trước khi Angular phá hủy chỉ thị / thành phần. Hủy đăng ký Quan sát và tách trình xử lý sự kiện để tránh rò rỉ bộ nhớ. Được gọi ngay trước khi Angular phá hủy chỉ thị / thành phần.

Bước 1: Tạo project Angular 2 tên lifecycle bấm vào đây

Lifecycle Hooks Angular 2

Angular 2

import {
  Component,
  Input,
  SimpleChanges,
  OnInit,
  OnChanges,
  DoCheck,
  AfterContentChecked,
  AfterViewInit,
  AfterContentInit,
  AfterViewChecked,
  OnDestroy
} from '@angular/core';

let logIndex = 1;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnChanges, DoCheck,
  AfterContentInit, AfterContentChecked, AfterViewInit,
  AfterViewChecked, OnDestroy {

  title = 'lifecycle';
  name = 'Hello Lifecycle';

  logIt(msg: String) {
    console.log(`#${logIndex++} - ${msg}`);
  }

  constructor() {
    this.logIt('nameThe value of the property in constructor is: ' + this.name);
  }

  ngOnInit() {
    this.logIt('ngOnInit');
  }

  ngOnChanges(changes: SimpleChanges) {
    this.logIt('nameThe value of the property in ngOnChanges is: ' + this.name);
  }

  ngDoCheck() {
    this.logIt('ngDoCheck');
  }

  ngAfterContentInit() {
    this.logIt('ngAfterContentInit');
  }

  ngAfterContentChecked() {
    this.logIt('ngAfterContentChecked');
  }

  ngAfterViewInit() {
    this.logIt('ngAfterViewInit');
  }

  ngAfterViewChecked() {
    this.logIt('ngAfterViewChecked');
  }

  ngOnDestroy() {
    this.logIt('ngOnDestroy');
  }
}

Bước 2: Chạy chương trình mở của sổ console

ng serve --open
or
ng serve --port=8080 --open

Github | download.zip