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

Question

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

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

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

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

Answer 1

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

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

@NgModule({
    declarations: [ HeaderComponent],
    exports: [HeaderComponent]
})
export class SharedModule { }

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

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

Plunker Example