Angular 中的动态 HTML答案

【问题标题】：Dynamic HTML In AngularAngular 中的动态 HTML
【发布时间】：2020-05-18 22:02:38
【问题描述】：

我想在 html 和 click 中使用动态按钮，我想在 Angular 中调用一个函数。我正在使用 angular 7。现在我找到了像 put button tag in angular staticly 这样的解决方案。但我不想使用它，因为我将动态拥有多个按钮、输入、日期选择器、时间选择器。所以请帮助我。我从过去 2 天开始一直在研究这个问题，但没有得到完美的解决方案。我也一直在使用 innerHtml 。但它不起作用。我用过 sanitizer ，它现在在 html 中显示按钮，但它的点击功能不起作用。它没有调用我的函数。

静态地它工作，但动态它不工作。请检查我下面的代码。

<br><h4>Dynamic</h4><br>
<div contenteditable="true [innerHtml]="dyanmicHtmlString"></div><br>
<h4>Static</h4><br>
<button (click)="somefunction()">Static Button</button>

this.dyanmicHtmlString = '<button (click)="somefunction()">Dyanamic Button</button>

【问题讨论】：

请为按钮点击问题创建一个stackblitz并分享它。

标签： angular

【解决方案1】：

您可以使用Renderer2 动态添加事件监听器，如下所示：

app.component.html：

<br>
 <h4>Dynamic</h4><br><div  [innerHtml]="dyanmicHtmlString  | safe: 'html'">
 </div><br><h4>Static</h4>
<br><button (click)="somefunction()">Static Button</button>

ts：

   name = 'Listen';
   listenerFn:any;
   dyanmicHtmlString = '<button class="dynamic" >Dyanamic Button</button>'
    constructor(private renderer: Renderer2) {}

   somefunction(){
     console.log('e')
   }

   ngAfterViewInit(){
    this.listenerFn =  this.renderer.listen(document.querySelector('.dynamic'), ('click'), () =>{
       this.somefunction()
     })
   }

   ngOnDestroy() {
    if (this.listenerFn) {
      this.listenerFn();
    }
  }

https://stackblitz.com/edit/angular-2uckbb?file=src%2Fapp%2Fapp.component.html

希望对你有帮助！

【讨论】：

【解决方案2】：

这种情况下可以使用ViewChild添加动态内容，

@ViewChild('myDiv', {static: false}) myDiv :ElementRef;

this.myDiv.nativeElement.insertAdjacentHTML('beforeend', '<button (click)="somefunction()" >Dyanamic Button</button>');

查看this stackblitz了解更多信息。

使用 DOM Sanitizer：

<h4>Dynamic</h4><br>
<div contenteditable="true" [innerHTML]="dyanmicHtmlString"></div><br>

import { DomSanitizer } from '@angular/platform-browser';


constructor(private sanitized: DomSanitizer) {}

ngOnInit() {
    this.dyanmicHtmlString = this.sanitized.bypassSecurityTrustHtml('<button (click)="somefunction()" >Dyanamic Button</button>');
}

【讨论】：

已清理 dom 内的 click 函数没有被 angular 解析