Question

最小化我的问题的结构，我们有：

lib.module.ts（库的模块-希望保持不变）

@NgModule({
  declarations: [
   InternalComponent,
   ExternalComponent
  ],
  exports: [
   ExternalComponent
  ]
})
export class LibModule {}

external.component.ts

@Component({
    selector: 'external',
    template: '<internal></internal> We are in external',
    styles: ['']
})
export class ExternalComponent{}

internal.component.ts

@Component({
    selector: 'internal',
    template: 'This is internal',
    styles: ['']
})
export class InternalComponent{}

所以我的职责是扩展ExternalComponent。据我所知，我们仅继承打字稿的逻辑。就我而言，Css和html必须独立进行管理-复制并进行一些修改。但是，当ExternalComponent未从InternalComponent导出时，如何复制LibModule的html？
假设ExternalExtendComponent是在AppModule中声明的。在AppModule中，我无法导入InternalComponent。因此，我无法在ExternalExtendComponent中使用标签为<internal>的模板。有什么想法吗？

Answer 1

实际上，您不必扩展ExternalComponent，只需在external html文件中使用ExternalExtendComponent标记。这将复制其中的external的html。这还将在internal内呈现extended-external组件，而无需从LibModule

导出它

看到这个小的DEMO

编辑：

要覆盖外部组件，请针对(#ext)中的external标签创建模板引用extended-external-comp。

要注入样式，可以使用Renderer2

示例代码

  @ViewChild('ext') ext : ElementRef

  constructor(private renderer : Renderer2 ) {
  }

  addStyles() {
    let animationState;
    let pEl = this.ext.nativeElement.querySelector('p')
    this.renderer.setStyle(pEl.nativeElement, '@ext', animationState);
  }

Answer 2

一个简单的解决方案可能是编写我自己的模块，而不使用库的模块。它看起来像这样： app.module.ts

import {InternalComponent,ExternalComponent} from 'myLib'; #myLib is in node_modules
import {TreeSelectExtComponent} from './tree-select-ext/tree-select-ext.component';

        @NgModule({
          declarations: [
           InternalComponent,
           ExternalComponent,
           ExternalExtComponent
          ]
        })
        export class AppModule{}

重要的是，在双重声明的项目中，我们无法导入LibModule。

嵌套不导出类的角扩展类

2 个答案: