동적 구성 요소 클릭 이벤트 바인딩 Angular2

내 프로젝트에서 일부 요소를 동적으로로드하고 있습니다. 그러나 요소에 대한 클릭 이벤트를 생성 할 수 없습니다.동적 구성 요소 클릭 이벤트 바인딩 Angular2

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 경우 작동합니다.

출처

2016-07-01 Lucifer

어디에서 추가하나요? 'this.dcl.loadXxx()'코드는 어떻게 생겼습니까? 'DynamicComponentLoader'는 대신에'ViewContainerRef.createComponent()'를 사용합니다. 예를 보려면 http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 –

Angular2는 어떤 방식 으로든 [innerHTML]="..." 또는 이와 유사한 것을 사용하여 동적으로 추가 된 HTML을 처리하지 않습니다. (click)은 그냥 무시되고 그대로 추가됩니다.

가능한 경우 HTML을 구성 요소에 포함하고 ViewContainerRef.createComponent()을 대신 사용하십시오. 예를 보려면 Angular 2 dynamic tabs with user-click chosen components

출처

2016-07-01 08:04:06

을 참조하십시오. 그리고 그 예에서 당신은 가지고있는 데이터를위한 별도의 구성 요소를 가지고 있다는 것에 의심의 여지가 있습니다. 내 데이터가 데이터베이스에서오고 있습니다. 그래서 구성 요소를 올바르게 가질 수 없습니까? – Lucifer

'FT14 LH15'와 같은 콘텐츠를 의미합니까? Angular 바인딩을 사용하여 '{{someProp}}'또는 '* ngFor'와 같은 DOM에 DOM을 추가하여 데이터에서 HTML을 생성 할 수 있습니다. https://angular.io/docs/ts/latest/guide/template-syntax.html –

FT14와 LH15의 의미는 모르지만 그 링크가 내 문제를 해결할 수 있습니다. – Lucifer

동적 구성 요소 클릭 이벤트 바인딩 Angular2

답변

관련 문제