イベントが動的に追加したいangular2

Question

でダイナミックHTMLで働いていないことなど

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で正常に追加しますが、関数のどれも同様に作業していない、DOM内のHTMLを生成しましたDOMはどんなイベントコールも働いていません。

助けてもらえますか？ ありがとうございます。

Answer 1

設定HTML直接自分でDOMでが角度に物事の正しい方法ではありません。 正しい方法は、コードをのコンポーネントに分割することです。各コンポーネントは独自の責任を負うべきです（S.O.L.I.D.のS）。

そして、あなたが使用する必要がありますinteractivatyこの種の（表示/隠し、スタイリング）について：ngIf、ngSwitch、ngClassあなたのテンプレートインチ