Sự khác biệt chính giữa constructor và ngOnInitđó ngOnInitlà hook vòng đời và chạy sau constructor. Mẫu nội suy thành phần và các giá trị ban đầu đầu vào không có sẵn trong hàm tạo, nhưng chúng có sẵn trong ngOnInit.
Sự khác biệt thực tế là cách ngOnInitảnh hưởng đến cách cấu trúc mã. Hầu hết các mã khởi tạo có thể được chuyển đến ngOnInit- miễn là điều này không tạo ra điều kiện cuộc đua .
Xây dựng antipotype
Một lượng đáng kể mã khởi tạo làm cho phương thức constructor khó mở rộng, đọc và kiểm tra.
Một công thức thông thường để tách logic khởi tạo khỏi hàm tạo của lớp là chuyển nó sang một phương thức khác như init:
class Some {
constructor() {
this.init();
}
init() {...}
}
ngOnInit có thể phục vụ mục đích này trong các thành phần và chỉ thị:
constructor(
public foo: Foo,
/* verbose list of dependencies */
) {
// time-sensitive initialization code
this.bar = foo.getBar();
}
ngOnInit() {
// rest of initialization code
}
Phụ thuộc tiêm
Vai trò chính của các nhà xây dựng lớp trong Angular là tiêm phụ thuộc. Các hàm tạo cũng được sử dụng cho chú thích DI trong TypeScript. Hầu như tất cả các phụ thuộc được gán làm thuộc tính cho thể hiện của lớp.
Trình xây dựng thành phần / chỉ thị trung bình đã đủ lớn bởi vì nó có thể có chữ ký đa dòng do phụ thuộc, đưa logic nội tâm hóa không cần thiết vào phần thân của trình tạo đóng góp vào antipotype.
Khởi tạo không đồng bộ
Hàm tạo khởi tạo không đồng bộ thường có thể được coi là antipotype và có mùi vì quá trình khởi tạo lớp kết thúc trước khi thói quen không đồng bộ thực hiện và điều này có thể tạo ra các điều kiện chạy đua. Nếu không phải như vậy ngOnInitvà các móc vòng đời khác là nơi tốt hơn cho việc này, đặc biệt vì chúng có thể được hưởng lợi từ asynccú pháp:
constructor(
public foo: Foo,
public errorHandler: ErrorHandler
) {}
async ngOnInit() {
try {
await this.foo.getBar();
await this.foo.getBazThatDependsOnBar();
} catch (err) {
this.errorHandler.handleError(err);
}
}
Nếu có các điều kiện chủng tộc (bao gồm cả điều kiện mà một thành phần không nên xuất hiện trong lỗi khởi tạo), thì thói quen khởi tạo không đồng bộ sẽ diễn ra trước khi khởi tạo thành phần và được chuyển sang thành phần chính, bộ bảo vệ bộ định tuyến, v.v.
Kiểm tra đơn vị
ngOnInitlinh hoạt hơn một nhà xây dựng và cung cấp một số lợi ích cho thử nghiệm đơn vị được giải thích chi tiết trong câu trả lời này .
Xem xét việc ngOnInitkhông được gọi tự động khi biên dịch thành phần trong các thử nghiệm đơn vị, các phương thức được gọi trong ngOnInitcó thể bị theo dõi hoặc chế giễu sau khi khởi tạo thành phần.
Trong các trường hợp đặc biệt ngOnInitcó thể được đặt hoàn toàn để cung cấp sự cô lập cho các đơn vị thành phần khác (ví dụ, một số logic mẫu).
Di sản
Các lớp con chỉ có thể tăng cường các nhà xây dựng, không thể thay thế chúng.
Vì thiskhông thể được giới thiệu trước super(), điều này đặt ra các hạn chế về ưu tiên khởi tạo.
Xem xét rằng thành phần hoặc chỉ thị Angular sử dụng ngOnInitcho logic khởi tạo không nhạy cảm theo thời gian, các lớp con có thể chọn có super.ngOnInit()được gọi hay không và khi nào:
ngOnInit() {
this.someMethod();
super.ngOnInit();
}
Điều này sẽ không thể thực hiện với chỉ riêng nhà xây dựng.
