innerHTMLに角度2のコンポーネントを動的に追加する方法

Question

コンポーネントライブラリのドキュメントを作成しています。私は、ページ上のコンポーネントとそのドキュメントの両方を生成するhtmlの1文字列が必要です。私はHTMLを検査すると、マイボタンタグが存在しない

：

私が持っているもの：私は何をしたい

。 innerHTMLを使用すると、それらは取り除かれています。

マイ部品コード：

private flatButtons = `<div class="button-wrapper"> 
     <my-button [type]="'default'" [raised]="false">Default</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'primary'" [raised]="false">Primary</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'success'" [raised]="false">Success</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'info'" [raised]="false">Info</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'warning'" [raised]="false">Warning</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'danger'" [raised]="false">Danger</my-button> 
    </div>` 

constructor() {} 

getCode() { 
    return html_beautify(this.flatButtons, this.options) 
} 

私のHTMLテンプレート：

<div class="row"> 
<div class="col-sm-6 col-xs-12"> 
    <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel"> 
    <div id="flatButtons" [innerHTML]="getCode()"> 
    </div> 
    </mi-card> 
</div> 
<div class="col-sm-6 col-xs-12"> 
    <pre>{{getCode()}}</pre> 
</div> 

Answer 1

角度は、HTMLを動的に追加処理しません、それだけでセキュリティを防ぐために、いくつかの消毒を除いてそのままそれを追加します問題。 HTMLを削除するサニタイザを防ぐ方法については、In RC.1 some styles can't be added using binding syntaxを参照してください。

Angular 2 dynamic tabs with user-click chosen componentsのようにViewContainerRef.createComponent()を使用すると、コンポーネントを動的に追加できます。

も、それは私の質問に答えるため、私はギュンターの答えを受け入れるだろうEquivalent of $compile in Angular 2

Answer 2

に示すようにコンポーネントを動的に作成する方法を利用可能なソリューションがあります。

私が問題を解決した方法は、コンポーネントを作成してそれを必要とすることでした。

import {Component} from '@angular/core'; 


@Component({ 
    selector: 'flat-buttons', 
    template: require('./flatButtons.html'), 
}) 
export class FlatButtons { 

    constructor() { 
    } 
} 

そして、私の修正HTMLテンプレート：

<div class="col-sm-6 col-xs-12"> 
    <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel"> 
    <flat-buttons></flat-buttons> 
    </mi-card> 
</div> 
<div class="col-sm-6 col-xs-12"> 
    <h3>Code Snippet</h3> 
    <div class="well"> 
    <pre>{{getFlatButtons()}}</pre> 
    </div> 
</div> 

そして、私の変更されたコンポーネントコード：

private flatButtons = require('./components/flatButtons/flatButtons.html') 

constructor() {} 

getFlatButtons() { 
    return html_beautify(this.flatButtons, this.options) 
}