时间戳

首页 > 解决方案 > 如何销毁以编程方式注入动态创建的角度组件的服务？

angular - 如何销毁以编程方式注入动态创建的角度组件的服务？

问题描述

在 Angular 中，可以在运行时动态加载和查看组件，方法是调用viewContainerRef.createComponent(factory)的实例ViewContainerRef，传递可以创建组件实例的工厂。

通过将Injector实例作为第三个参数传递，可以（以编程方式）为动态加载的组件（及其子组件）提供额外的服务，例如：

const injector = Injector.create({
    providers: [
        { provide: AdditionalService, useClass: AdditionalService },
    ],
    parent: parentInjector
});

const componentRef = viewContainerRef.createComponent(factory, undefined, injector);

但是，附加服务仅在动态创建的组件需要它时才被实例化——所以我们不知道注入器是否还持有该服务的实例。一段时间后，我们销毁动态创建的组件：

// some time later, we destroy the dynamically created component:
componentRef.destroy();

不幸的是，销毁组件不会自动销毁（可能存在的）服务！而且注入器没有提供销毁的方法，所以无法销毁附加的服务。

我们如何才能ngOnDestroy()正确维护那些以编程方式提供的服务的生命周期（尤其是 ）？

注意：我在 StackBlitz 上实现了一个简短的示例来演示此行为。它动态加载需要两个服务的组件。第一个服务在组件级别 ( @Component({ provides: [ FirstService ]}) 上提供，第二个通过注入器提供，如上所述。当组件被销毁时，第一个服务被正确销毁，而第二个“保持活动状态”。

标签： angularangular-ivy

解决方案

而且注入器没有提供销毁的方法，所以无法销毁附加的服务。

有injector.destroy哪个实际上调用SecondService.ngOnDestroy. 如果您考虑一下-这似乎合乎逻辑，但我根本找不到该方法的任何文档...

推荐阅读