Angular 扩展 class 嵌套未导出 class

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 必须独立管理，在我的例子中 - 复制并稍作修改。但是，如何在 InternalComponent 未从 LibModule 导出的情况下复制 ExternalComponent 的 html？
假设 ExternalExtendComponent 在 AppModule 中声明。在 AppModule 中，我无法导入 InternalComponent。所以我不能在带有标签 <internal> 的 ExternalExtendComponent 中使用模板。有想过吗？

Answer 1

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

导出它

看到这个小DEMO

编辑：

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

要注入样式，可以使用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，因为双重声明。

Angular 扩展 class 嵌套未导出 class

Angular extending class with nested not exported class

inheritance

internal

angular