事件在angular2中的动态html中不起作用 [英] Event not working in dynamic html in angular2

问题描述

想要在DOM中追加动态生成的html，它在DOM中成功追加，但没有一个函数像点击等那样工作。

 < code $ ng $ n $ b $< 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 ）>'+ 
'< i class =fa fa-home>< / i>'+ 
'< span class =title>主页< / span> ;'+ 
'< / a>'+ 
'< / li>'; 
 this.getJSONService.getData（）
 .subscribe（response => {
 var value = response.datas 
 if（value.length> 0）{
为（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 + ='& lt; / 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 +'< ; /跨度>'; 
 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 不是在 Angular 中进行操作的正确方法。
正确的方法是将代码拆分为 Components ，其中每个Component都应该有它自己的责任（S在SOLID中）。

对于这种 interactivaty （显示/隐藏，样式），您应该使用： ngIf ， ngSwitch ， ngClass 。

Want to append the dynamic generated html in a DOM, its appending successfully in a DOM but none of the function is working like click etc.

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

Data is appending in DOM but no any event call is working..

Can you please help. Thanks in advance.

解决方案

Setting html in DOM directly by yourself isn't the right way of doing things in Angular. The right way is to split your code into Components, where each Component should have it's own responsibilaty (S in S.O.L.I.D.).

And for this kind of interactivaty (showing/hiding, styling) you should use: ngIf, ngSwitch, ngClass in your templates.

这篇关于事件在angular2中的动态html中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！