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

【问题标题】：(click) event don't work in string angular 4（单击）事件在字符串角度 4 中不起作用
【发布时间】：2018-02-16 05:26:34
【问题描述】：

当我点击标签 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>

但函数 delete 不调用也不显示警报

【问题讨论】：

也许可以试试 ${idperson} 而不是 {{idperson}}
我已经尝试过该表格，但它不起作用
你找到解决办法了吗？

标签： html angular typescript

【解决方案1】：

角度字符串插值大括号在这样的变量中不起作用。

您可以使用template literals（注意反引号，而不是单引号）：

this.iduser = `<a style="font-weight: bold;"> id: ${idperson} </a>`

或String.format:

this.iduser = '<a style="font-weight: bold;"> id: {} </a>'.format(idperson)

【讨论】：

【解决方案2】：

您使用的是 Angular 4，那么为什么不简单地使用插值呢？

因此，您的代码将如下所示：

idLabel = 'id: ';
id: number;

然后您的模板将如下所示：

<span>
  <a style="font-weight:bold;" href="#">{{idLabel + id}}</a>
</span>

理想情况下，如果您为此链接使用路由器，您可以将routerLink diractive 附加到锚标记，如下所示：

<a style="font-weight:bold;" [routerLink]="'/user/' + id"></a>

...或任何您的路线配置。

【讨论】：

【解决方案3】：

试试这个：

    this.idperson = 1;
    this.iduser = `<a style='font-weight: bold;'> id: ${idperson} </a>`;

请注意，我使用的是反引号，而不是简单的引号。结果将是：

id: 1

【讨论】：

【解决方案4】：

如果您使用 AOT，它可能就像公开函数一样简单？

同时检查浏览器控制台是否有错误

【讨论】：

函数是公开的，我在控制台没有错误