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

Posted 2023-02-23

【中文标题】在 Angular 中动态创建的嵌套组件

【英文标题】：Nested Components created on the fly in Angular

【发布时间】：2018-05-06 05:43:06

【问题描述】：

我有这个 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 不是已知元素。

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

【问题讨论】：

你不能在运行时添加这样的 Angular “东西”——只能是纯 html。对于你想要的，你需要在运行时编译一个组件。见***.com/questions/38888008/…

plnkr.co/edit/2zMCh6elJxh2RInqB6ZZ?p=preview

@yurzui 的解决方案有帮助吗？

终于成功了！非常感谢@yurzui！

感谢@AngularInDepth.com 教我如何使用动态组件。今天你可以用 Angular 做的事情真是太棒了。 blog.angularindepth.com/…

【参考方案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