Angular 2 - 在父组件内加载子组件(动态创建)

时间:2017-01-10 09:22:52

标签: angular

我正在尝试动态创建标题,构建标题模板并将其作为'string'传递给我的动态组件。我的要求是在标题组件模板字符串中调用另一个组件并加载它。

为此方案创建了一个有用的Plunker

我在浏览器控制台中收到错误:

Unhandled Promise rejection: Template parse errors:
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.
2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("     <span class="title" style="float: right; margin-right: 10px;">
                                [ERROR ->]<alert></alert>   
                                <img class="notify-circle" src="https://cdn0.iconf"): DynamicComponent@2:32 ; Zone: <root> ; Task: Promise.then ; Value: Object { _nativeError: Error, stack: "" } BaseError@https://unpkg.com/@angular/compiler/bundles/compiler.umd.js:1595:29 [angular]

问题:

如何使用选择器'<alert></alert>'在构造为字符串的标题模板中识别'Alert'组件。

这个概念可能看起来很奇怪,但要求就是这样。

1 个答案:

答案 0 :(得分:2)

您可以创建包含您所需内容的特殊共享模块

@NgModule({
  declarations: [AlertComponent],
  exports: [AlertComponent]
})
export class SharedDynamicModule {}

然后将其导入DynamicModule

<强> dynamic.ts

@NgModule({
  imports: [ CommonModule, SharedDynamicModule ],
  declarations: [ DynamicComponent ]
})
class DynamicHtmlModule { }

<强> Modified Plunker