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

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

1 个答案: