Vòng đời của component trong Angular

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người về Vòng đời của component trong Angular là như thế nào?

1.Vòng đời của component

Vòng đời của một component hay một directive trong Angular tính từ lúc nó được tạo ra, nó bị thay đổi và bị phá huỷ. Hiểu được vòng đời của component ta có thể viết code can thiệp trong quá trình component hay direct được tạo ra, được cập nhật và phá huỷ.

Khi ứng dụng Angular được start lên thì đầu tiên nó sẽ tạo và render component cha (hay còn gọi là root component) sau đó nó sẽ tạo và render các component con. Khi mỗi component được load lên, component sẽ kiểm tra xem có data binding vào nó không, dữ liệu có thay đổi không và cập nhật lại chúng. Khi component bị phá huỷ thì chúng sẽ bị remove (xoá) khỏi giao diện web

Angular cung cấp cho chúng ta một số phương thức về vòng đời của một component. Dựa vào đó chúng ta có thể can thiệp vào quá trình tạo ra component, cập nhật giá trị và phá huỷ của component. Sau đây là thứ tự từ trên xuống dưới về các method sẽ được sử dụng trong vòng đời của một component.

  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked
  • ngOnDestroy

1. ngOnChanges

Phương thức ngOnChanges được gọi khi component phát hiện có giá trị được binding vào component băng phương pháp Input properties. Để nhận biết được giá trị binding thì ngOnChange quản lý đối tượng SimpleChanege. Chúng ta sử dụng @Input trong bài truyền giá trị từ cha xuống con là một ví dụ

Ví dụ sau ta có component cha truyền giá trị message xuống cho component con (child-component) thông qua properties sau đó component con sẽ dùng @Input để nhận giá trị và binding vào component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component} from '@angular/core';
import { Customer } from './customer';
 
@Component({
  selector: 'app-root',
  template: '
        <h1>!</h1>
        <p> Message : <input type='text' [(ngModel)]='message'> </p>
        <p> Code : <input type='text' [(ngModel)]='code'></p>
        <p> Name : <input type='text' [(ngModel)]='name'></p>
        <p><button (click)="updateCustomer()">Update </button>
        <child-component [message]=message [customer]=customer></child-component>
        ' ,
 
        styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngOnChanges';
  message = '';
  customer: Customer = new Customer();
  name= '';
  code= 0;
 
  updateCustomer() {
    this.customer= new Customer();
    this.customer.name = this.name;
    this.customer.code = this.code;
  }
 
}

Chúng ta có component con với nội dung nhu sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Component, Input, OnInit, OnChanges, SimpleChanges, SimpleChange,ChangeDetectionStrategy  } from '@angular/core';
import { Customer } from './customer';
 
@Component({
    selector: 'child-component',
    template: '<h2>Child  Component</h2>
               <p>Message  </p>
               <p>Customer Name  </p>
               <p>Customer Code  <p>
               <ul><li *ngFor="let log of changelog;"> </li></ul> '
})
export class ChildComponent implements OnChanges, OnInit {
    @Input() message: string;
    @Input() customer: Customer;
    changelog: string[] = [];
 
    ngOnInit() {
        console.log('OnInit');
    }
 
    ngOnChanges(changes: SimpleChanges) {
        console.log('OnChanges');
        console.log(JSON.stringify(changes));
 
        // tslint:disable-next-line:forin
        for (const propName in changes) {
             const change = changes[propName];
             const to  = JSON.stringify(change.currentValue);
             const from = JSON.stringify(change.previousValue);
             const changeLog = `${propName}: changed from ${from} to ${to} `;
             this.changelog.push(changeLog);
        }
    }
}

Đầu tiên chúng ta import thư viện từ angular core như sau

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

Tiếp đến ta cài đặt các vòng đời của Angular

1
2
3
4
export class ChildComponent implements OnChanges, OnInit {
    @Input() message: string;
    @Input() customer: Customer;
    changelog: string[] = [];

Trong hàm ngOnChnages ta lấy tất cả các sự thay đổi giá trị của component thông qua đối tượng SimpleChange

1
2
3
ngOnChanges(changes: SimpleChanges) {
        console.log('OnChanges');
        console.log(JSON.stringify(changes));

Xử lý nghiệp vụ trong hàm ngOnChange cho phù hợp với yêu cầu của chúng ta.

2. ngOninit

Phương thức NgOninit được gọi, khi component được tạo lần đầu tiên. Chúng ta được chạy sau khi hàm constructor và hàm ngOnchange được thực hiện.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component,  OnInit } from '@angular/core';
 
@Component({
  selector: 'child-component',
  template: '
      <h2>Child Component</h2>
      ' ,
  styleUrls: ['./app.component.css']
})
export class ChildComponent implements OnInit {
 
  constructor() {
    console.log('ChildComponent:Constructor');
  }
 
  ngOnInit() {
    console.log('ChildComponent:OnInit');
  }
 }

Đầu tiên chúng ta import thư viện OnInit từ angular core

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

Tiếp đến chúng ta khai báo cài đặt hàm OnInit

1
export class ChildComponent implements OnInit {

Cuối cùng chúng ta viết code trong phương thức ngOnInit để can thiệt vào lúc component được tạo ra

1
2
3
ngOnInit() {
  console.log('ChildComponent:OnInit');
}

3. ngOnDoCheck

Phương thức ngOnDoCheck được gọi mỗi khi nó phát hiện ra có sự thay đổi dữ liệu ở component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange, DoCheck  } from '@angular/core';
import { Customer } from './customer';
 
@Component({
    selector: 'child-component',
    template: `<h2>Child  Component</h2>
               <p>Message  </p>
               <p>Customer Name  </p>
               <p>Customer Code  </p>
               <p>Do Check count  </p>
               <ul><li *ngFor="let log of changelog;"> </li></ul> `
})
export class ChildComponent implements OnChanges, DoCheck, OnInit {
    @Input() message: string;
    @Input() customer: Customer;
    changelog: string[] = [];
    oldCustomer: Customer= new Customer();
    DocheckCount = 0;
 
    ngOnInit() {
        console.log('OnInit');
        this.oldCustomer = Object.assign({}, this.customer);
    }
 
    ngDoCheck() {
        console.log('Docheck');
        this.DocheckCount++;
        if (this.oldCustomer.name !== this.customer.name || this.oldCustomer.code !== this.customer.code ) {
            const to  = JSON.stringify(this.customer);
            const from = JSON.stringify(this.oldCustomer);
            const changeLog = `DoCheck customer: changed from ${from} to ${to} `;
            this.changelog.push(changeLog);
 
            this.oldCustomer = Object.assign({}, this.customer);
        }
    }
 
    ngOnChanges(changes: SimpleChanges) {
        console.log('OnChanges');
        console.log(JSON.stringify(changes));
 
        // tslint:disable-next-line:forin
        for (const propName in changes) {
             const change = changes[propName];
             const to  = JSON.stringify(change.currentValue);
             const from = JSON.stringify(change.previousValue);
             const changeLog = `${propName}: changed from ${from} to ${to} `;
             this.changelog.push(changeLog);
        }
    }

Đầu tiên chúng ta import DoCheck từ thư viện angular core

1
import { Component, Input, OnChanges, OnInit, SimpleChanges, SimpleChange, DoCheck  } from '@angular/core';

Chúng ta implement DoCheck interface

1
export class ChildComponent implements OnChanges, DoCheck, OnInit {

Cuối cùng chúng ta viết code trong hàm ngDoCheck để kiểm tra sự thay đổi và thêm các dòng code mình muốn

1
2
3
4
5
6
7
8
9
10
11
ngDoCheck() {
        console.log('Docheck');
        this.DocheckCount++;
        if (this.oldCustomer.name !== this.customer.name || this.oldCustomer.code !== this.customer.code ) {
            const to  = JSON.stringify(this.customer);
            const from = JSON.stringify(this.oldCustomer);
            const changeLog = `DoCheck customer: changed from ${from} to ${to} `;
            this.changelog.push(changeLog);
 
            this.oldCustomer = Object.assign({}, this.customer);
        }

4. ngAfterContentInit

Phương thức này được gọi sau khi component được khởi tạo thành công

1
2
3
4
5
6
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterContentInit {
  ngAfterContentInit() {
    // ...
  }
}

5. ngAfterContentChecked

1
2
3
4
5
6
7
8
Phương thức này được gọi sau khi Component Content được kiểm tra bởi Angular's Change module.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterContentChecked {
  ngAfterContentChecked() {
    // ...
  }
}

6. ngAfterViewInit

Nó tượng tự nhưg ngAfterContentInit but nó được gọi khi component và các component con của nó được khởi tạo thành công. Chỉ được gọi 1 lần sau khi ngAfterContentChecked

1
2
3
4
5
6
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // ...
  }
}

7. ngAfterViewChecked

Phương thức này được gọi sau khi các view component cha và các view của component con được kiểm tra xong.

1
2
3
4
5
6
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    // ...
  }
}

8. ngOnDestroy

Phương thức ngOnDestroy được gọi trước khi component hoặc directive bị phá huỷ bởi Angular

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Component, OnDestroy } from '@angular/core';
 
@Component({
  selector: 'child-component',
  template: '
      <h2>Child Component</h2>
      ',
  styleUrls: ['./app.component.css']
})
export class ChildComponent implements OnDestroy {
 
  constructor() {
    console.log('ChildComponent:Constructor');
  }
 
 
 
  ngOnDestroy() {
    console.log('ChildComponent:OnDestroy');
  }
 
}

Đầu tiên chúng ta import OnDestroy tử angular core

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

Tiếp đến implement OnDestroy Interface

1
export class ChildComponent implements OnDestroy

Cuối cùng là viết code trong hàm ngOnDestroy

1
2
3
ngOnDestroy() {
    console.log('ChildComponent:OnDestroy');
  }

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments