角度2 /イオン2でプログラムでHTMLノードを追加

Question

Ionic 2を新しくしました&角度2でボタン要素をプログラムで（TypeScriptファイルで）追加したいと思います。 たとえば、次のノードの種類：

<button ion-button (click) = "self.showAlert('dynamic component')">DynamicComp</button> 

どうすればいいですか？私はComponentOutletを試したが、それは動作していないようだ....

アイデア？

Answer 1

HTML：

<button ion-button (click) = "showAlert('dynamic component')">DynamicComp</button> 

TS：

showAlert(message:string){ 
    alert(message); 
} 

このような何か？あなたがあなたのページにボタンを追加したい場合は

それともthrought TS - >

HTML

<div [innerHtml]="innerHtmlVar"></div> 

TS

innerHtmlVar:string = `<button ion-button (click)="self.alert('message')"></button>` 

Answer 2

申し訳ありませんが、あなたは任意の角度を挿入するinnerHTMLプロパティを使用することはできませんのようなコードを呼び出す（クリック）。 innerHtmlはhtmlのみを表示します。実際、デフォルトでは、多くの「安全でない」htmlをサニタイズ（すなわち、除去）しますが、作業ではサニタイズをオフにすることができます。しかし、それでもなお、（クリック）のような角度コードは機能しません。

動的HTMLで角度動作を使用する場合は、ComponentOutletを使用する必要があります。ここにはworking plnkrがあります。このプロジェクトのメンテナーは動的テンプレート内でカスタムタグを使用していると書いています。キーパーツはファイルsrc/app.tsにあります。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <ng-container *componentOutlet="template; context: context"></ng-container> 
    </div> 
    `, 
}) 
export class App { 
    template = `<h2>Hello {{name}}</h2><page-component-test></page-component-test>` 
    context = { 
    name: 'Angular 2' 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ComponentOutlet ], 
    providers: [provideComponentOutletModule({ 
    declarations:[PageComponentTest] 
    })], 
    bootstrap: [ App ] 
}) 
export class AppModule {}