角2 - 親コンポーネント内でロードする子コンポーネントを取得する（動的に作成する）

Question

動的にヘッダを作成し、ヘッダテンプレートを '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>'。

概念が奇妙に見えるかもしれませんが、要件はそのようなものです。

Answer 1

あなたは

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

必要なものを常に含む特別な共有モジュールを作成してからDynamicModule

dynamic.ts

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

Modified Plunker

にインポートすることができます