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

Question

我手动引导Angular应用程序.

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

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

到目前为止它运作良好,但我担心简单地删除元素不会清理.还有什么我应该做的'unbootstrap'应用程序？

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;
}

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

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