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

问题描述

想要将动态生成的 html 附加到 DOM 中，它在 DOM 中成功附加，但没有一个功能像单击等那样工作.

 ngOnInit() {this.sideBarData += '<li class="sidebar-toggler-wrapper hide" >'+'<div class="sidebar-toggler" >

'+'</li>'+'<li class="sidebar-search-wrapper"></li>';this.sideBarData += '

'+'<a class="nav-link home name" (click)="HomeButton(event)">'+'<i class="fa fa-home"></i>'+'<span class="title">首页</span>'+'</a>'+'</li>';this.getJSONService.getData().订阅(响应=> {var value=response.datas如果(值.长度> 0){for (var i = 0; i < value.length; i++) {如果(值[i].状态){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>';如果 (this.checkDataExist(value[i])){var data1 = this.data(value[i]);}this.sideBarData += '</a></li>';} 别的{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>';如果 (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自己在 Angular 中做事不是正确的方式.正确的方法是将您的代码拆分为组件，其中每个组件都应该有自己的职责(S.O.L.I.D. 中的 S).

对于这种交互(显示/隐藏、样式)，您应该使用: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屋！