Ereignis nicht in angular2

Question

in dynamischem HTML-Code Möchten Sie die dynamisch generierte HTML in einem DOM anhang, sein erfolgreich in einem DOM-Anhängen aber keiner der Funktion arbeitet wie klicken usw.

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 
       } 
       } 
      } 
      })       
     } 

Daten anhängen in DOM, aber kein Ereignis Anruf funktioniert ..

Können Sie bitte helfen. Vielen Dank im Voraus.

Answer 1

Einstellung html in DOM selbst direkt ist nicht der richtige Weg, Dinge zu tun in Angular. Der richtige Weg ist, Ihren Code in Komponenten zu teilen, wobei jede Komponente ihre eigene Verantwortung haben sollte (S in S.O.L.I.D.).

Und für diese Art von interactivaty (ein-/ausblenden, Styling) sollten Sie verwenden: ngIf, ngSwitch, ngClass in Ihren Vorlagen.