Question

您可以覆盖第三方模块的组件声明吗？

假设您正在使用声明并导出两个组件的第三方模块：

@NgModule({
  exports: [Cmp1, Cmp2]
  declarations: [Cmp1, Cmp2]
})
export class ThirdPartyModule {}

Cmp1的模板：

`<app-cmp2></app-cmp2>`

Cmp2的模板：

`<p>foo</p>`

AppModule导入ThirdPartyModule：

@NgModule({
  ...
  imports: [ThirdPartyModule],
  declarations: [AppComponent]
})
export class AppModule {}

AppComponent的模板只是<app-cmp1></app-cmp1>。

您如何重新声明/覆盖第三方模块的Cmp2实施，以便在Cmp2内不会MyCmp2而Cmp1呈现？

显然，我需要扩展Cmp2（或实现其接口）：

@Component({
  ... // same selector as Cmp2
})
export const MyCmp2 extends Cmp2 {}

我尝试通过DI提供它：{ provide: Cmp2, useClass: MyCmp2 }这不起作用。

在app模块中简单地声明它也不会起作用，因为当两个组件匹配相同的选择器时，角度会抛出。这甚至可能吗？

我的具体用例是覆盖材质水平步进器的标题组件。

Answer 1

无法按照您描述的方式进行操作，因为您要么要声明两个具有相同名称的组件，要么根本不声明任何组件。

一种可能的解决方案是将ComponentFactoryResolver与配置服务一起使用。

假设您要在两个不同的模块ComposableComponent和{{1}上将InnerComponent与另一个InnerComponent1（InnerComponent2或ComposedWithInner1Module）一起使用}。

ComposedWithInner2Module定义为：

ComposedWithInner1Module

@NgModule({ imports: [ComposableComponentModule], providers: [ { provide: Config, useValue: { component: InnerComponent1 } } ], }) export class ComposedWithInner1Module {}定义为：

ComposedWithInner2Module

在@NgModule({ imports: [ComposableComponentModule], providers: [ { provide: Config, useValue: { component: InnerComponent2 } } ], }) export class ComposedWithInner2Module {}上，您需要说ComposableComponentModule或InnerComponent2都可以动态注入，这是通过InnerComponent1属性完成的：

entryComponents

然后@NgModule({ declarations: [ComposableComponent], exports: [ComposableComponent] entryComponents: [InnerComponent2, InnerComponent1] }) export class ComposableComponentModule {}通过注入的ComposableComponent获取注入的InnerComponentX，并使用Config将其加载到模板中：

ComponentFactoryResolver

覆盖导入的模块的组件声明

1 个答案: