关于动态：在 Angular 中动态创建的嵌套组件


Nested Components created on the fly in Angular

我有这个 plunker 示例 https://embed.plnkr.co/RtZvxv2rPFpLPZGndS0g/ 我有两个动态创建的组件：ContentComponent 和 HeaderComponent。我想像这样在 ContentComponent 模板中引用 HeaderComponent 选择器：

1
2
3
4
ngOnInit() {
  this.template ="This is the {{ name }}</app-header>";
  this.compileTemplate();
}

不幸的是，这不起作用，编译器抱怨：app-header 不是已知元素。

有人知道如何解决这个问题吗？是否有另一种方法可以获得相同的最终结果？

相关讨论

Angular 找不到 app-header 元素，因为 HeaderComponent 既没有声明也没有导入

要解决它，您可以创建声明和导出 HeaderComponent

的 SharedModule

1
2
3
4
5
@NgModule({
    declarations: [ HeaderComponent],
    exports: [HeaderComponent]
})
export class SharedModule { }

最后只需将其导入您的动态模块

1
2
3
4
5
@NgModule({
  declarations: [decoratedCmp],
  imports: [SharedModule] <============ this line
})
class RuntimeContentModule { }

Plunker 示例