angular - 删除 Angular 根元素时会发生什么

Question

我正在手动引导 Angular 应用程序。

ngDoBootstrap(app) {
    app.bootstrap(AppComponent);
}

当根元素从 DOM 中移除时，我等待它再次被注入(inject)并再次手动引导应用程序。这种情况发生很多很多次。 (我在一个更大的应用程序中使用 Angular...)。

到目前为止它运行良好，但我担心简单地删除该元素并不能解决问题。我还应该做些什么来“取消引导”应用程序吗？

Answer 1

您最多只能检查 Angular 源代码中的引导方法实现。

https://github.com/angular/angular/blob/44dd764d6d6582d92d3709501258cdb51c3ea85d/packages/core/src/application_ref.ts#L453

以下是主要兴趣点(为清楚起见，省略了部分代码):

bootstrap<C>(componentOrFactory: ComponentFactory<C>|Type<C>, rootSelectorOrNode?: string|any): ComponentRef<C> {
    const compRef = componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule);

    compRef.onDestroy(() => { this._unloadComponent(compRef); });

    this._loadComponent(compRef);

    return compRef;
}

您可以看到每次引导时都会创建一个带有新注入(inject)器的组件。在销毁 this._unloadComponent 时销毁关联的 View 和组件实例。如果您不确定 onDestroy 是否在元素删除时触发，您可以在引导方法返回的组件引用上自行触发它:

const compRef: ComponentRef<AppComponent> = app.bootstrap(AppComponent);
// some time later
compRef.destroy();