Question

我有2个Angular项目。将被构建为自定义Web元素的第一个项目，供其他项目使用。

[项目A]-app.module：

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        CustomModules
    ]
    providers: [
        MyService  <---- this did not get destroyed when <custom-element> was removed from DOM
        ...
    ]
})
export class AppModule {
    constructor(private injector: Injector) {}
    ngDoBootstrap(appRef: ApplicationRef) {
        if (environment.mode=== 'production') {
           customElements.define('custom-element', createCustomElement(AppComponent, { injector: this.injector }));
        }
    }
}

[项目B]-app.component.html：

包含<*ngIf="..." custom-element></custom-element>，以显示整个Project A。

但是，当我从DOM中删除自定义元素（使用ngIf或display：none）时，MyService OnDestroy方法没有被调用，因为它是在Project A app.module中提供的。

我尝试在AppComponent提供程序中提供MyService，该调用程序允许调用OnDestroy，但由于没有在根目录（app.module）中提供，因此我无法在Project A的CustomModules中使用相同的服务。

如何为MyService和AppComponent提供CustomModules，并确保从DOM中删除自定义元素时如何调用MyService OnDestroy？

Answer 1

在项目B中，使用Injector类创建MyService的实例，然后将此实例作为输入绑定到您的自定义元素中：

[项目B]-app.component.html

myServiceInstance : any
constructor (..., this.injector: Injector) {
...
this.myServiceInstance = this.injector.get(MyService)
}

[项目A（自定义元素）]-app.component.ts

...
@Input() serviceInstance: any;
...
// user serviceInstance like you use your normal service

这样，我希望服务实例与自定义组件并行销毁。

角度customElements：当从DOM中删除customElements时，如何使服务自行销毁？

1 个答案: