ダイナミックコンポーネントClickイベントバインディングAngular2

Question

私のプロジェクトでは、いくつかの要素を動的に読み込んでいますが、その要素のクリックイベントを生成することはできません。

import {Component, DynamicComponentLoader, Injector} from 'angular2/core'; 


@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <button (click)="form()"> 
    View Form 
    </button> 
    <div id="form" [innerHTML]=""> 
     Welcome..! Here form component will be loaded. 

    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    private strForMarkets = ""; 
    private sbForMarkets: Array<string> = []; 
    constructor(public dcl:DynamicComponentLoader, public _injector:Injector) { 
    } 
    form() { 
     var s = ["a", "s", "d", "p"]; 
     this.sbForMarkets.push("<div><ul>") 
     for (var index = 0; index < s.length; index++) { 
      var element = s[index]; 
      this.sbForMarkets.push("<li class='OH liDataLeftFilterMarketsContainer'>"); 
      this.sbForMarkets.push("<div class='FL sprite_icon expand-icon-market'></div>"); 
      this.sbForMarkets.push("<div class='expand-text-div CP FT14 LH15' (click)='chill($event)' >" + element + "</div>"); 
      this.sbForMarkets.push("</li>"); 
     } 
     this.sbForMarkets.push("</ul></div>"); 
     this.strForMarkets = this.sbForMarkets.join(""); 
    } 

    chill() { 
     console.log("Dude... Chill "); 
    } 
} 

p.s.私は動的なコンポーネントローダーで試してみましたが、テンプレート内のすべてのhtmlであれば動作します。

Answer 1

Angular2は、[innerHTML]="..."などを使用して動的に追加されたHTMLを処理しません。(click)はそのまま無視され、そのまま追加されます。

可能であれば、HTMLをコンポーネントにラップし、代わりにViewContainerRef.createComponent()を使用してください。例についてはAngular 2 dynamic tabs with user-click chosen components