Question

当我点击标签a时，我的功能不会打电话我有我的组件中的下一个代码

public htmlstr: string;
public idUser:number;

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

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

my html

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

但功能删除不会调用而不会显示提醒

div是动态创建的

Answer 1

这里的主要问题是@Matt Clyde和@ Marciej21592指出的事情，是你试图动态添加需要编译的HTML代码才能使用（你正在尝试绑定到方法和变量）。

有些方法可以看here。

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

Answer 2

我使用这种方法及其工作

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监听事件

Answer 3

我不经常使用[innerHTML]，但看起来你正在使用<a (click)="delete(idUser)">${idUser}</a>的模板字符串引用${idUser}时你可能有${this.idUser}？

Answer 4

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

我有点也无法理解为什么你坚持通过字符串文字传递事件而不仅仅是使用：

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

Answer 5

如果有人遇到相同的问题，并且最重要的是答案不起作用，请尝试以下技巧：

在HTML中：

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

在组件中：

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


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

Answer 6

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

Answer 7

下面的代码段对我有用：-

在组件中：

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'

（单击）事件在innerHtml string angular 4中不起作用

7 个答案: