Angular 2 - 让子组件加载到父组件内（动态创建）

Question

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

已在此处为该场景创建了一个有效的 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>' 在构造为字符串的标题模板中识别“警报”组件。

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

Answer 1

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

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

然后将其导入您的DynamicModule

dynamic.ts

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

Modified Plunker