動態調用組件angular2，將customElement附加到DOM onClick

Question

我試圖將該元素附加到父DOM onClick。如何動態調用組件？ 如果我添加簡單的「Hello World，它按預期工作，但我想打電話。‘myCustomTag’組件

注：如果我添加‘在模板直接myCustomTag標籤’，它的工作原理它是附着在如預期 「myCustomTag」 模板。

 @Component({ 
     selector: 'myTag', 
     template: `<div (click) = "onAttachClick()"> clickToAddELement </div>` 
    }) 
    export class xxx { 
    getNewElement() { 
     return '<myCustomTag [name]="someText"></myCustomTag>' 
     } 
     //on click, I need to add the element 
     onAttachClick() { 
     this.parentElement.insertAdjacentHTML('beforeend',this.getNewElement()); 
     } 
} 

Answer 1

您可以設置一個局部變量

<div #myAttach (click) = "onAttachClick()"> clickToAddELement </div> 

並使用

export class xxx { 
    @ViewChild('myAttach') myAttach; 
    .... 
} 

然後

this.myAttach.nativeElement.insertAdjacentHTML('beforeend',this.getNewElement()); 

讀這可以幫助你： What's the proper way of accessing native element in angular2 (2 diff ways) docs are scarce