Angular 2 - 让子组件加载到父组件中(动态创建)

Question

我正在尝试动态创建 header ，构造 header 模板并将其作为“字符串”传递给我的动态组件。我的要求是在 header 组件模板字符串中调用另一个组件并加载它。

已创建一个工作 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>' 在构造为字符串的 header 模板中识别“警报”组件.

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

Answer 1

您可以创建特殊的共享模块，其中始终包含您需要的内容

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

然后将其导入到您的DynamicModule

dynamic.ts

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

<强> Modified Plunker