使用angular4在innerhtml中单击操作不起作用[重复]答案

【问题标题】：click action in an innerhtml using angular4 not working [duplicate]使用angular4在innerhtml中单击操作不起作用[重复]
【发布时间】：2018-11-21 09:22:39
【问题描述】：

我正在尝试在 innerHTML 中放置一个锚标记，并且我正在使用 angular 4。

in HTML file: <div [innerHTML]="'myText' | translate">

in Component: const myText = "mytext go here and <a (click)='myFunction()'> click here </a>."

我没有在 DOM 中获得“(click)='myFunction()'”。

【问题讨论】：

你得到了什么？另外，您告诉[innerHTML] 将'myText' 解释为字符串，因为它用单引号括起来
'myText' | translate 应改为：myText | translate
@Derek 应该是 myText | translate 因为translate 这里是管道
@PardeepJain 我的立场是正确的，我很抱歉
@Derek 我正在获取翻译后的 html，但没有点击事件。我的意思是点击没有任何反应。

标签： javascript angular

【解决方案1】：

这行不通，你的代码很好，但它是 Angular 设计的。

每当您通过innerHTML 传递一些内容时，Angular 只会呈现该内容，不会像您通过添加点击事件那样评估该内容中的任何expression 或binding。

所以为了实现这一点（根据您的要求），您可以将您的内容包装到另一个组件中，并通过@input 属性绑定传递数据并将其显示到浏览器中。

更多细节你可以在这里阅读-

Angular 2 innerHTML (click) binding

【讨论】：

听到这个消息非常难过。感谢您的回复。
@KRUSHANUMOHAPATRA 别担心，解决一个问题的方法有很多:)
我们可以使用'pointer-events: none;'在 CSS 中用于带有 innerHTML 的 div。