2016-07-31 8 views
0

내 코드는 2 .. 동적으로, 나는 각 사용하고있는 UI에 HTML 태그를 생성하기 위해 여기

<i id="lrbp" #lrbp data-toggle="popover" [attr.data-content]="popovercontent" data-placement="bottom" (click)="openSettingPopOver(lrbp)" class="btn btn-default fa fa-cog fa-lg" aria-hidden="true"></i> 

데이터 컨텐츠는 예를 들어, .TS 파일에 생성됩니다 . = 'draw3D()' 이 기능 같은 .TS에

파일입니다

initPopOverContent(){ 
    this.popovercontent = "<ul class='list-group' style='margin:0'>" + 
     "<li type='button' (click)='draw3D()' class='list-group-item'><i class='fa fa-cubes' aria-hidden='true'></i> 3D Chart</li>" + 
     "<li type='button' class='list-group-item'><i class='fa fa-line-chart' aria-hidden='true'></i> Line Chart</li>" + 
     "<li type='button' class='list-group-item'><i class='fa fa-pie-chart' aria-hidden='true'></i> Pie Chart</li>" + 
     "</ul>";  
} 

openSettingPopOver(id: any) { 
    this.popover = id; 
    let template: string = '<div class="popover" style="min-width:10em" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content" style="padding:0"></div></div>'; 

    $(id).popover({ html: true, template: template }).popover('toggle'); 
} 

하지만 클릭 이벤트에이

(클릭)를 호출 받고 있지 않습니다 .

이유 2가 동적으로 html 태그를 부착하는 부적절한 방법 일 수 있습니다.

비슷한 종류의 문제가 해결되면 아무도 도와 줄 수 없습니다.

답변

0

이것은 지원되지 않습니다. 동적으로 추가 된 HTML은 브라우저로 전달되고 위생 (잠재적 인 위험한 HTML, CSS 등으로 제거됩니다)하지만 Angular2 바인딩이나 구성 요소 및 지시문은 생성되지 않습니다.