Lập trình Angular

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

23/04/2024

Vòng đời của component trong Angular tính từ lúc nó được tạo ra, rồi các sự kiện diễn ra trong nó, đến lúc cuối đời là component bị hủy.

Vòng đời của component trong Angular
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

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

Có nhiều sự kiện xảy ra trong vòng sống của component . Đó là ngChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngngAfterViewInit, ngAfterViewChecked, ngOnDestroy. Khi những sự kiện này xảy ra , bạn có thể code để làm cái gì đó .

ngOnChanges

Là sự kiện xảy ra trong component khi giá trị được bind vào component bằng hàm @Input có thay đổi. Lúc sự kiện này xảy ra, bạn muốn thực thi code thì định nghĩa hàm ngOnChanges trong component.

Hàm ngOnChanges có 1 tham số kiểu SimpleChange. Thông qua tham số này, bạn có thể truy xuất giá trị mới, giá trị cũ. Ví dụ trong app.component.html có code nhúng component con home

<!-- app.component.html -->
<app-home [so_san_pham]="so_san_pham" ></app-home>
<button (click)="tang()">Tăng</button>

<!-- app.component.ts-->
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';  
import { HomeComponent } from './home/home.component';
@Component({
  selector: 'app-root', standalone: true,
  imports: [ CommonModule, HomeComponent ],
  templateUrl: './app.component.html', styleUrl: './app.component.css'
})
export class AppComponent {
  so_san_pham = 10;
  tang() { this.so_san_pham++;}
}

Khi biến so_san_pham thay đổi giá trị thì hàm ngOnChanges sẽ tự động chạy

import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-home', standalone: true, imports: [],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  ngOnChanges(changes: SimpleChanges) {
     if (changes['so_san_pham'].currentValue>20) {
        changes['so_san_pham'].currentValue = 20;
        this.so_san_pham= 20;
    }
    console.log("changes=", changes);  
  }//ngOnChanges
}

ngOnInit

Trong component, nếu bạn có định nghĩa hàm ngOnInit thì hàm này sẽ được gọi duy nhất 1 lần khi component được tạo. Hàm ngOnInit chạy sau hàm constructor và hàm ngOnchange (lần đầu). Thường dùng ngOnInit để thực hiện các việc khởi tạo ban đầu. Ví dụ gán giá trị khởi đầu cho các biến, gọi api, ghi log, khởi tạo form…

//home.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-home', standalone: true, imports: [],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  ngOnInit(): void { 
    this.so_san_pham = 6;
    console.log("ngOnInit")
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes['so_san_pham'].currentValue>20) {
      changes['so_san_pham'].currentValue = 20;
      this.so_san_pham= 20;
    }
    console.log("changes=", changes);  
  }
}

ngDoCheck

Trong component, nếu bạn có định nghĩa hàm ngDoCheck thì hàm này sẽ chạy mỗi khi component phát hiện ra có sự thay đổi dữ liệu ở trong component.

ngDoCheck() chạy ngay sau ngOnChanges() và ngOnInit() . Nó cũng chạy nhiều lần khác nữa, mỗi khi có sự thay đổi giá tri các biến. Mời xem ví dụ:

//home.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-home', standalone: true, imports: [],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  n:number = 10;
  ngOnInit(): void { console.log("ngOnInit")}
  ngOnChanges(changes: SimpleChanges) {
    console.log("changes=", changes);  
  }
  ngDoCheck(){    
    if (this.n<0) { alert("n > 0"); this.n=1;}
    console.log('Docheck ');
  }//ngDoCheck
  giam() { this.n--;}
}

ngAfterContentInit

Nếu trong component bạn có định nghĩa hàm ngAfterContentInit thì nó sẽ chạy 1 lần sau khi nội dung component đã được xây dựng thành công trong DOM. Tức nội dung component đã được nạp vào trang web lần đầu thành công.

//home.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-home', standalone: true, imports: [],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  n:number = 10;
  ngOnInit(): void { console.log("ngOnInit")}
  ngOnChanges(changes: SimpleChanges) {
    console.log("changes=", changes);  
  }
  ngDoCheck(){ console.log('Docheck ') }
  giam() { this.n--;}
  ngAfterContentInit(){ 
    console.log("Hàm ngAfterContentInit chạy"); 
  }
}

ngAfterContentChecked

Trong component của bạn nếu có hàm ngAfterContentChecked thì nó sẽ chạy mỗi lần Angular dò thấy có sự thay đổi trong targets DOM content.

Hàm này chạy sau hàm ngAfterContentInit. Và nó có thể chạy nhiều lần tùy theo sự thay đổi dữ liệu trong DOM.

//home.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-home', standalone: true, imports: [],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  n:number = 10;
  ngOnInit(): void { console.log("ngOnInit")}
  ngOnChanges(changes: SimpleChanges){ console.log("Changes");}
  ngDoCheck(){ console.log('Docheck '); }
  giam() { this.n--;}
  ngAfterContentInit(){ console.log("ngAfterContentInit chạy"); }
  ngAfterContentChecked(){
    console.log("ngAfterContentChecked chạy");
  }
}

ngAfterViewInit

Hàm này tương tự như ngAfterContentInit nhưng nó chạy 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, chạy sau ngAfterContentChecked.

//home.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-home', standalone: true, imports: [],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  n:number = 10;
  ngOnInit(): void { console.log("ngOnInit")}
  ngOnChanges(changes: SimpleChanges) {
    console.log("changes=", changes);  
  }
  ngDoCheck(){ console.log('Docheck ') }
  giam() { this.n--;}
  ngAfterContentInit(){console.log("Hàm ngAfterContentInit") }
  ngAfterContentChecked(){console.log("ngAfterContentChecked") }
  ngAfterViewInit(){ console.log("Hàm ngAfterViewInit chạy") }
}

ngAfterViewChecked

Hàm ngAfterViewChecked được gọi chạy sau khi Angular dò thấy có sự thay đổi trong view của component cha và các view của component con

<!-- home.component.html-->
<p *ngIf="anhien"> Số sản phẩm: <b>{{so_san_pham}}</b> </p>
<p><button (click)="giam()"> Giảm</button> {{n}}</p>
<p><button  (click)="anhien=!anhien">Ẩn p </button></p>

//home.component.ts
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-home', standalone: true, imports: [CommonModule],
  templateUrl: './home.component.html', styleUrl: './home.component.css'
})
export class HomeComponent {
  @Input() so_san_pham:number = 0;
  n:number = 10;
  ngOnInit(): void { console.log("ngOnInit")}
  ngOnChanges(changes: SimpleChanges) {
    console.log("changes=", changes);  
  }
  ngDoCheck(){ console.log('Docheck ') }
  giam() { this.n--;}
  ngAfterContentInit(){console.log("Hàm ngAfterContentInit") }
  ngAfterContentChecked(){console.log("ngAfterContentChecked") }
  ngAfterViewInit(){console.log("Hàm ngAfterViewInit chạy") }
  anhien:boolean=true;
  ngAfterViewChecked() {
    console.log("Hàm ngAfterViewChecked chạy")
  }
}

ngOnDestroy

Trong component, nếu có hàm ngOnDestroy thì nó sẽ được gọi chạy 1 lần duy nhất trước khi component bị huỷ bởi Angular. Dùng hàm này nếu cần để hủy connection, unsubribe, xóa các biến trong stored…

Tóm lại, vòng đời của component trong Angular có nhiều sự kiện xảy ra. Bạn có thể tạo các hàm theo tên của sự kiện để chạy tự động. Cần them khảo thêm thì xem ở đây https://angular.io/guide/lifecycle-hooks

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

ngOnChanges

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

ngOnDestroy

BÀI VIẾT LIÊN QUANXEM THÊM

Module trong Angular

Authentication trong Angular

Sử dụng http service trong angular

BÀI VIẾT LIÊN QUAN XEM THÊM