角2：innerHTMLの動的コンポーネントをロード中

Question

2つのコンポーネントがあります。今、例えばinnerHTMLとして動的にロードする必要があります。

Angular2成分-1クラス

import { 
    Component, 
    OnInit, 
    ViewEncapsulation 
} from '@angular/core'; 


@Component({ 
    selector: 'component-1', 

    templateUrl: './component-1.html', 

    encapsulation: ViewEncapsulation.None 
}) 
export class Component1 implements OnInit {  

    public ngOnInit() { 
    this.domEl = '<component-2 data="1234"></component-2>' 
    } 
} 

成分-2において

成分-1.html

<div [innerHTML]="domEl | safeHtml"></div> 

以下のように既に[]宣言を介しapp.module.tsファイル内に注入されます。また、safeHtmlは安全なHTML変換に使用されるパイプです。

問題があっても、コンポーネント2はロードされていません。誰も私はこれを修正する方法を提案することはできますか？

注：

• 私はコンポーネント-1.htmlでコンポーネント-2が含まれる場合は、直接それが動作します。しかし、コンポーネント-2を動的に注入することはできません。
• StackはAngular2、TypeScript、Webpack上にビルドされています。

Answer 1

Angularはセキュリティ目的で墨塗りを除いて[innerHTML]="..."に渡されたHTMLを処理しません。前述のように、Angularはコンテンツを無視するため、バインディング、コンポーネント、ディレクティブなどは作成されません。あなたができることは、Equivalent of $compile in Angular 2で説明されているように、実行時にコンポーネントを作成することです。 AFAIR誰かがこれを簡単にするモジュールを作りましたが、詳細は覚えていません。