（单击）事件在innerHtml字符串Angular 4中不起作用答案

【问题标题】：(click) event not work in innerHtml string Angular 4（单击）事件在innerHtml字符串Angular 4中不起作用
【发布时间】：2018-07-26 19:13:59
【问题描述】：

单击<a... 标记时未调用我的函数。

我的组件中有以下代码：

public htmlstr: string;
public idUser:number;

this.idUser = 1;
this.htmlstr = `<a (click)="delete(idUser)">${idUser}</a>`;

public delete(idUser){
    alert("id " + idUser);
}

我的html

<div [innerHTML]="htmlstr"></div>

但是函数delete 没有被调用并且没有显示警报。

<div... 是动态创建的

【问题讨论】：

把html直接放到文档中，而不是使用[innerHTML]，是否有效？

标签： html angular typescript

【解决方案1】：

我使用这种方法及其工作

public htmlstr: string;
public idUser:number;

this.idUser = 1;
this.htmlstr = `<a id='innerHtmlClick'>${idUser}</a>`     
        this.htmlstr.querySelector(`innerHtmlClick`).addEventListener('click', () => {
        this.delete(idUser);
      });

public delete(idUser){
    alert("id " + idUser);
}

EventListener 使用 innerHtml 的 id 监听事件

【讨论】：

我不明白这是如何工作的：函数querySelector 不存在于类型为“字符串”的htmlstr 上。

【解决方案2】：

下面的代码 sn-p 对我有用：-

在组件中：

ngAfterViewChecked () {

    if (this.elementRef.nativeElement.querySelector('ID or Class of the Html element')) {
      this.elementRef.nativeElement.querySelector('ID or Class of the Html element').addEventListener('click', this.editToken.bind(this));
    }
  }

内部构造函数参数：-

constructor( private readonly elementRef: ElementRef) {}

import { ElementRef } from '@angular/core';---> at the top of the file

implement 'AfterViewChecked'

【讨论】：

【解决方案3】：

我不经常使用 [innerHTML]，但看起来您使用的模板字符串 <a (click)="delete(idUser)">${idUser}</a> 引用了 ${idUser}，而您的意思可能是 ${this.idUser}？

【讨论】：

【解决方案4】：

您的组件具有内部 Html。出于安全原因，Angular 将不允许内部 Html 部分中的事件。您可以使用子组件。从内部 Html 部分内部进行事件。创建一个子组件并将您的 html 放在子组件中，并使用 Angular 中的输入、输出功能使用父子之间的任何角度事件来传递数据

【讨论】：

【解决方案5】：

如果有人遇到同样的问题，最重要的是答案不起作用，那么试试我的把戏：

在 HTML 中：

<button onclick="Window.myComponent.test()"> test </button>

在组件中：

class 
  constructor(){
    Window["myComponent"] = this;
  }


  test(){
    console.log("testing");
  }

【讨论】：

这对我来说就像一个魅力。非常感谢 Khurshid :)。
解决方案中更简单的方法是 class constructor(){ Window["test"] = this.test; } test(){ console.log("testing"); }

【解决方案6】：

除了@Matt Clyde 和@Marciej21592 指出的问题之外，您在这里的主要问题是您正在尝试动态添加需要在使用之前编译的 HTML 代码（您正在尝试绑定到方法和变量）。

一些方法可以看到here。

但是，根据您提供的代码，有更简单的方法可以完成您所追求的目标。对于初学者，我会在 HTML 中以该代码开头，并根据需要使用 ngIf 隐藏/显示它。

【讨论】：

【解决方案7】：

我认为这不是一个错误，而是 Angular 针对 XSS 攻击的安全措施 - 有关更多信息，我建议查看https://angular.io/guide/security#sanitization-example

我也有点不明白为什么你坚持通过字符串文字而不是简单地使用：

<div>
    <a (click)="delete(idUser)">${this.idUser}</a>
</div>

【讨论】：