AngularInDepth đang rời khỏi Medium. Bài viết này, các bản cập nhật của nó và các bài viết gần đây hơn được lưu trữ trên nền tảng mới inDepth. nhà phát triển
Angular cung cấp một số cơ chế để kết nối vào quá trình khởi tạo. Bài viết này khám phá chúng và chỉ ra cách chúng có thể được sử dụng
APP_BOOTSTRAP_LISTENER
Có thể đăng ký người nghe cho quá trình khởi động góc. nơi họ được gọi
private _loadComponent[componentRef: ComponentRef]: void {
this.attachView[componentRef.hostView];
this.tick[];
this._rootComponents.push[componentRef];
// Get the listeners lazily to prevent DI cycles.
const listeners =
this._injector.get[APP_BOOTSTRAP_LISTENER, []].concat[this._bootstrapListeners];
listeners.forEach[[listener] => listener[componentRef]];
}
Đây là chức năng mà Angular gọi khi khởi tạo ứng dụng. Bên cạnh việc cung cấp thông tin chi tiết về cách một thành phần được thêm vào ứng dụng, nó cũng gợi ý rằng đối với mỗi thành phần được khởi động, Angular gọi các trình nghe đã đăng ký dưới mã thông báo APP_BOOTSTRAP_LISTENER
và chuyển thành phần đã khởi động cho họ
Điều đó có nghĩa là chúng ta có thể sử dụng các móc như vậy để đăng ký quy trình khởi động ứng dụng và thực hiện logic khởi tạo của mình. Ví dụ, đây là cách Router
đối với quy trình và
Vì Angular chuyển thành phần đã khởi tạo vào hàm gọi lại, nên chúng ta có thể nắm giữ gốc ComponentRef của ứng dụng như thế này
import {APP_BOOTSTRAP_LISTENER, ...} from '@angular/core';@NgModule[{
imports: [BrowserModule, ReactiveFormsModule, TasksModule],
declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent],
providers: [{
provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: [] => {
return [component: ComponentRef] => {
console.log[component.instance.title];
}
}
}],
bootstrap: [AppComponent]
}]
export class AppModule {
}
Sau khi chạy vào chức năng như vậy trong các nguồn, tôi đã kiểm tra tài liệu và nó được mô tả là thử nghiệm và mô tả sau đây được cung cấp
Tất cả các cuộc gọi lại được cung cấp qua mã thông báo này sẽ được gọi cho mọi thành phần được khởi động. Chữ ký của cuộc gọi lại
[componentRef: ComponentRef] => void
APP_INITIALIZER
Angular cũng cung cấp một cơ chế để thực hiện một số logic khởi tạo trước khi nó khai báo ứng dụng là đã khởi tạo và tiếp tục với việc phát hiện thay đổi và hiển thị mẫu. khởi tạo này diễn ra
constructor[@Inject[APP_INITIALIZER] @Optional[] appInits: [[] => any][]] {
const asyncInitPromises: Promise[] = [];
if [appInits] {
for [let i = 0; i < appInits.length; i++] {
const initResult = appInits[i][];
if [isPromise[initResult]] {
asyncInitPromises.push[initResult];
}
}
}
Vì vậy, giống như cách chúng tôi đã làm với mã thông báo APP_BOOTSTRAP_LISTENER
, chúng tôi chỉ xác định nhà cung cấp
import {APP_BOOTSTRAP_LISTENER, ...} from '@angular/core';@NgModule[{0 và chức năng của chúng tôi sẽ được gọi. Ví dụ sau trì hoãn khởi tạo góc trong 5 giây
imports: [BrowserModule, ReactiveFormsModule, TasksModule],
declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent],
providers: [{
provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: [] => {
return [component: ComponentRef] => {
console.log[component.instance.title];
}
}
}],
bootstrap: [AppComponent]
}]
export class AppModule {
}
{
provide: APP_INITIALIZER,
useFactory: [] => {
return [] => {
return new Promise[[resolve, reject] => {
setTimeout[[] => {
resolve[];
}, 5000];
}];
}
},
multi: true
}
Và bạn có thể định nghĩa nhiều
import {APP_BOOTSTRAP_LISTENER, ...} from '@angular/core';@NgModule[{1 như thế này
imports: [BrowserModule, ReactiveFormsModule, TasksModule],
declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent],
providers: [{
provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: [] => {
return [component: ComponentRef] => {
console.log[component.instance.title];
}
}
}],
bootstrap: [AppComponent]
}]
export class AppModule {
}
{
provide: APP_INITIALIZER,
useFactory: [] => {
return [] => {
return new Promise[[resolve, reject] => {
setTimeout[[] => {
resolve[];
}, 5000];
}];
}
},
multi: true
},
{
provide: APP_INITIALIZER,
useFactory: [] => {
return [] => {
return new Promise.resolve[2];
}
},
multi: true
}
BootstrapModule
Một điểm khác mà bạn có thể kết nối vào quá trình khởi động ứng dụng là phương pháp
import {APP_BOOTSTRAP_LISTENER, ...} from '@angular/core';@NgModule[{2________số 8_______
imports: [BrowserModule, ReactiveFormsModule, TasksModule],
declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent],
providers: [{
provide: APP_BOOTSTRAP_LISTENER, multi: true, useFactory: [] => {
return [component: ComponentRef] => {
console.log[component.instance.title];
}
}
}],
bootstrap: [AppComponent]
}]
export class AppModule {
}
Tại đây, bạn có thể đưa NgModuleRef vào mô-đun bootstrapped thông qua đó bạn có thể truy cập và ComponentRef