事件在 angular2 的动态 html 中不起作用

Question

想要在 DOM 中追加生成的动态 html，它在 DOM 中成功追加，但是 none 函数的工作方式类似于点击等

 ngOnInit() {
        this.sideBarData += '<li class="sidebar-toggler-wrapper hide" >' +
          '<div class="sidebar-toggler" > </div>' +
          '</li>' +
          '<li class="sidebar-search-wrapper"></li>';
        this.sideBarData += '<li class="nav-item start">' +
          '<a class="nav-link home name" (click)="HomeButton(event)">' +
          '<i class="fa fa-home"></i>' +
          '<span class="title">Home</span>' +
          '</a>' +
          '</li>';
        this.getJSONService.getData()
          .subscribe(response => {
            var value=response.datas
            if (value.length > 0) {
              for (var i = 0; i < value.length; i++) {
                if (value[i].state)
                {
                    this.sideBarData += '<li class="nav-item" >' +
                            '<a (click)="parentNav($event)" routerLink="/' + value[i].state + '" class="nav-link nav-toggle ' + value[i].key + '" >' +
                            '<i class="fa fa-' + value[i].label_Icon + '"></i>' +
                            '<span class="title">' + value[i].label + '</span>';
                    if (this.checkDataExist(value[i]))
                    {
                       var data1 = this.data(value[i]);
                    }        
                    this.sideBarData += '</a></li>';
                } else
                {
                    this.sideBarData += '<li class="nav-item" >' +
                            '<a  class="nav-link nav-toggle ' + value[i].key + '" (click)="parentNav($event)">' +
                            '<i class="fa fa-' + value[i].label_Icon + '"></i>' +
                            '<span class="title">' + value[i].label + '</span>';
                    if (this.checkDataExist(value[i]))
                    {
                       var data1 = this.data(value[i].data);
                    } 
                    this.sideBarData += '</a></li>';
                    this.sidebarChild.element.nativeElement.innerHTML=this.sideBarData
                }
              }
            }
          })                        
      }

数据正在追加 DOM 但没有任何事件调用在工作..

你能帮忙吗？提前致谢。

Answer 1

在DOM[=27中设置html =] 在 Angular 中，你自己直接做事并不是正确的做法。正确的方法是将代码拆分为 Components，其中每个 Component 都应该有自己的职责（S.O.L.I.D 中的 S）。

对于这种 interactivaty（showing/hiding，样式）你应该使用：ngIf 、ngSwitch、ngClass 在您的模板中。

事件在 angular2 的动态 html 中不起作用

Event not working in dynamic html in angular2

html

typescript

angular2-forms

angular2-template

angular2-routing