动态调用组件 angular 2，将自定义 Element 附加到 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