Angular ngOnInit vs Constructor: Nắm vững vòng đời Component

vào

Trong thế giới phát triển web front-end với Angular, việc hiểu rõ vòng đời của một component là vô cùng quan trọng để xây dựng ứng dụng hiệu quả và dễ bảo trì. Hai phương thức thường gây bối rối cho các lập trình viên, đặc biệt là những người mới bắt đầu, chính là ngOnInit và constructor. Bài viết này sẽ đi sâu vào so sánh ngOnInit vs constructor, giúp bạn phân biệt rõ ràng thời điểm và cách sử dụng chúng một cách hiệu quả nhất.

Constructor: Khởi tạo nhanh gọn

Trong lập trình hướng đối tượng, constructor là phương thức đặc biệt được gọi tự động khi một đối tượng mới được tạo. Trong Angular, constructor của một component thường được sử dụng cho các mục đích sau:

  • Khởi tạo các thuộc tính của component: Bạn có thể gán giá trị ban đầu cho các biến của component ngay trong constructor.
  • Tiêm dependency injection: Constructor là nơi bạn nhận các dependency cần thiết cho component, ví dụ như service, từ Angular injector.

Tuy nhiên, constructor không phải là nơi lý tưởng để thực hiện các tác vụ phức tạp như gọi API hay thao tác DOM. Lý do là tại thời điểm constructor được gọi, component chưa được khởi tạo hoàn toàn, các dependency có thể chưa sẵn sàng và view của component cũng chưa được render.

constructor(private myService: MyService) {
  this.myProperty = 'Giá trị ban đầu';
}

ngOnInit: Khởi đầu cho vòng đời component

ngOnInit là một lifecycle hook được cung cấp bởi Angular. Nó được gọi ngay sau khi Angular khởi tạo xong các thuộc tính binding của component.

Đây là thời điểm thích hợp để thực hiện các tác vụ sau:

  • Gọi API để lấy dữ liệu: Vì component đã được khởi tạo hoàn toàn, bạn có thể yên tâm gọi service để lấy dữ liệu từ server và cập nhật view.
  • Thao tác DOM: Bạn có thể truy cập và thao tác các phần tử DOM của component một cách an toàn.
  • Thực hiện các logic khởi tạo phức tạp: Bất kỳ logic khởi tạo nào phức tạp hơn việc gán giá trị đơn giản đều nên được đặt trong ngOnInit.
ngOnInit() {
  this.myService.getData().subscribe(data => {
    this.myData = data;
  });
}

So sánh trực diện: ngOnInit vs Constructor

Tiêu chí Constructor ngOnInit
Thời điểm gọi Khi component được tạo Sau khi component được khởi tạo và binding
Mục đích Khởi tạo thuộc tính, tiêm dependency Thực hiện logic khởi tạo, gọi API, thao tác DOM
Thao tác DOM Không an toàn An toàn
Gọi service Có thể gây lỗi An toàn

Tóm tắt

Nắm vững sự khác biệt giữa ngOnInit và constructor là chìa khóa để viết code Angular rõ ràng, hiệu quả và dễ bảo trì. Sử dụng constructor cho việc khởi tạo đơn giản và tiêm dependency, trong khi ngOnInit là nơi lý tưởng cho các logic khởi tạo phức tạp hơn.

VS