Angular 2 - 获取子组件加载父组件(动态创建)
我想动态创建一个头,构造并将头模板作为'字符串'传递给我的动态组件。我的要求是调用头组件模板字符串中的另一个组件并加载它。Angular 2 - 获取子组件加载父组件(动态创建)
已经创建了一个工作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"): [email protected]:32 ; Zone: <root> ; Task: Promise.then ; Value: Object { _nativeError: Error, stack: "" } [email protected]://unpkg.com/@angular/compiler/bundles/compiler.umd.js:1595:29 [angular]
问:
我怎样才能构建为一个字符串的头部模板内公认的“警报”组件,使用选择器'<alert></alert>'
。
这个概念可能看起来怪异,但要求是这样的。
您可以创建特殊共享模块包含总是你所需要的
@NgModule({
declarations: [AlertComponent],
exports: [AlertComponent]
})
export class SharedDynamicModule {}
,然后将其导入到DynamicModule
dynamic.ts
@NgModule({
imports: [ CommonModule, SharedDynamicModule ],
declarations: [ DynamicComponent ]
})
class DynamicHtmlModule { }
@ yurzui..just有一个小好奇心,如果未来的要求来动态创建警报组件,共享模块肯定不会在这种情况下工作(只需编辑问题中的重击者并看到)..是否有可能动态创建警报和标题并在布局上呈现它。 – Ranjan
请在重新编辑 – yurzui
上重新创建它,这里是更新后的重新编译的脚本。[链接](https://plnkr.co/edit/BJEUCyGM0MRdt2EndmqU?p=preview),已删除警报组件并在* header *,但catch没有任何'selector/viewContainerRef',我们如何在* header *里调用* alert *,这样当头动态加载时,它有* alert *作为其创建的子组件。 – Ranjan
@ yurzui ..感谢..我的要求完美..将帮助我的很多类似的情况。你可以发布你的答案接受。 – Ranjan