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

Question

想要将动态生成的html附加到DOM中，将其成功附加到DOM中，但是没有一个函数像click等那样工作。

 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中设置html并不是在Angular中做事的正确方法。 正确的方法是将您的代码拆分为Components ，其中每个Component应该具有自己的职责（在SOLID中为S）。

对于这种交互性 （显示/隐藏，样式），您应该在模板中使用： ngIf ， ngSwitch ， ngClass 。