Móc vòng đời trong Angular

---

Angular cung cấp cho ta 8 hook để cho phép ta khai thác vòng đời của các thành phần của bạn và kích hoạt các hành động tại các điểm cụ thể trong vòng đời.

Bài đăng này thảo luận về các móc vòng đời trong Angular 2 trở lên.

Dưới đây là các móc vòng đời có sẵn, theo thứ tự mà chúng được gọi:

• ngOnChanges : Được gọi mỗi khi thuộc tính đầu vào ràng buộc dữ liệu thay đổi. Nó được gọi là lần đầu tiên trước khi hook ngOnInit . Hook nhận một đối tượng SimpleChanges chứa các giá trị trước đó và hiện tại cho các thuộc tính đầu vào ràng buộc dữ liệu. Hook này thường được gọi, vì vậy bạn nên hạn chế số lần xử lý nó.
• ngOnInit : Được gọi một lần khi khởi tạo thành phần.
• ngDoCheck : Sử dụng hook này thay vì ngOnChanges cho các thay đổi mà Angular không phát hiện. Nó được gọi ở mọi chu kỳ phát hiện thay đổi, vì vậy, việc duy trì những gì nó làm ở mức tối thiểu là rất quan trọng đối với hiệu suất.
• ngAfterContentInit : Được gọi sau khi nội dung được chiếu trong thành phần.
• ngAfterContentChecked : Được gọi sau khi nội dung được chiếu được kiểm tra.
• ngAfterViewInit : Được gọi sau khi chế độ xem của một thành phần hoặc chế độ xem con được khởi tạo.
• ngAfterViewChecked : Được gọi sau khi chế độ xem của một thành phần hoặc chế độ xem con được chọn.
• ngOnDestroy : Được gọi một lần khi thành phần bị phá hủy và một móc nối tốt để sử dụng để dọn dẹp và hủy đăng ký khỏi các đối tượng quan sát.

ngOnInit

Hãy cho bạn một ví dụ đơn giản bằng cách sử dụng hook ngOnInit . Móc vòng đời ngOnInit có lẽ là móc bạn sẽ sử dụng thường xuyên nhất. Nếu bạn có nhiều quá trình xử lý phải thực hiện khi thành phần được tạo, bạn nên thực hiện nó trong hook ngOnInit thay vì trong constructor:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    this.setupData();
    this.doStuff();
    // ...
  }

  setupData() {
    // ...
  }

  doStuff() {
    // ...
  }
}

Lưu ý cách ta nhập OnInit , nhưng ta triển khai nó bằng phương thức ngOnInit . Đó là nguyên tắc tương tự cho các móc vòng đời khác.

Nhiều móc vòng đời

Việc triển khai nhiều hook thật dễ dàng:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  constructor() {}

  ngOnInit() {
    console.log('Component Init');
  }

  ngOnDestroy() {
    console.log('Component Destroy');
  }
}

ngOnChanges

Móc ngOnChanges, với đối tượng SimpleChanges , hơi khác một chút. Đây là cách bạn sẽ thực hiện nó. Giả sử ta có một thành phần được sử dụng như sau:

<my-todo [title]="title" [content]="content"></my-todo>

Bây giờ nói rằng ta muốn làm điều gì đó khi thuộc tính title thay đổi:

import { Component, Input, SimpleChanges, OnChanges }
  from '@angular/core';

@Component({
  // ...
})
export class MyTodoComponent implements OnChanges {
  @Input() title: string;
  @Input() content: string;
  constructor() { }

---

---

Các tin liên quan