click事件在innerhtml字符串angular 6中不起作用

Posted 2023-02-16

我正在使用angular 6生成动态模板。我有一个返回如下字符串的API：

    <button type="button" (click)="openAlert()">click me</button>

和html

    <div [innerHtml]="myTemplate | safeHtml">
      </div>

功能在下面：

    openAlert() 
        alert('hello');
      

答案

基本上这是行不通的。当您使用Angular编写代码时，webpack会将其transpiled转换为在浏览器中执行的javascript。

但是，现在您正在动态注入Angular code，而不是build。事件检测(click)本机无法运行，并且函数openAlert不在注入它的全局范围内。您将不得不考虑另一种方法，并根据<ng-template>的响应使用API生成内容。

另一答案

您不能将角度事件直接绑定到innerHTML。

仍然，如果您需要附加事件侦听器，则需要在加载html内容之后进行。

一旦将内容设置为变量，就会触发ngAfterViewChecked Angular生命周期事件。在这里，您需要附加所需的事件侦听器。

检查下面的工作示例。

component.html

<button (click)="addTemplate()">Get Template</button>
<div [innerHTML]="myTemplate | safeHtml"></div>

component.ts

import  Component, ElementRef  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  name = 'Angular';
  myTemplate  = '';

  constructor(private elementRef:ElementRef)

  
  openAlert() 
    alert('hello');
  
  addTemplate()
     this.myTemplate  = '<button type="button" id="my-button" (click)="openAlert()">click mee</buttn>';
  
  ngAfterViewChecked ()
    if(this.elementRef.nativeElement.querySelector('#my-button'))
      this.elementRef.nativeElement.querySelector('#my-button').addEventListener('click', this.openAlert.bind(this));
    
   

safe-html.pipe.ts

import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer  from '@angular/platform-browser';
@Pipe(
  name: 'safeHtml'
)
export class SafeHtmlPipe implements PipeTransform 
constructor(private sanitized: DomSanitizer) 
  transform(value) 
        return this.sanitized.bypassSecurityTrustHtml(value);
    

另一答案

这也应该起作用：

component.html

<div #template></div>

component.ts

@ViewChild('template') myTemplate: ElementRef;

addTemplate()
   this.myTemplate.nativeElement.innerHTML = '<button type="button">click me</button>';
   this.myTemplate.nativeElement.addEventListener('click', this.openAlert);