Giải thích sự khác biệt giữa Constructor và ngOnInit

Constructor và ngOnInit là hai phương thức quan trọng trong vòng đời của một component trong Angular, mỗi phương thức đều có mục đích và thời điểm sử dụng riêng biệt.

Constructor

Constructor là phương thức đầu tiên được thực thi khi một instance của class được tạo ra. Nó thường được sử dụng để khởi tạo các biến instance và tiêm các dependency cần thiết cho component thông qua Dependency Injection (DI) của Angular. Constructor không nên chứa logic nặng hoặc các thao tác liên quan đến DOM vì lúc này component chưa được khởi tạo hoàn chỉnh[2][4].

Ví dụ về việc sử dụng constructor để tiêm dependency:

@Injectable()
class Computer {
  constructor(public cpu: CPU) {}
}

Trong ví dụ trên, CPU là một dependency được tiêm vào class Computer thông qua constructor[1].

ngOnInit

ngOnInit là một lifecycle hook được gọi sau khi Angular thực hiện xong việc xây dựng component, bao gồm việc thiết lập các input properties. Phương thức này thường được sử dụng để thực hiện các khởi tạo logic hoặc gọi dữ liệu từ server, vì lúc này component đã sẵn sàng để làm việc với các dữ liệu đầu vào và các view child[2][4].

Ví dụ về việc sử dụng ngOnInit để khởi tạo logic:

@Component({
  selector: 'app-example',
  template: '<p>{{data}}</p>'
})
export class ExampleComponent implements OnInit {
  data: string;

  ngOnInit() {
    // Logic khởi tạo hoặc gọi dữ liệu
  }
}

Trong ví dụ trên, ngOnInit được sử dụng để thực hiện các khởi tạo sau khi component được tạo ra[4].

...