在 Angular 2/4/5 中从 JavaScript 添加动态 HTML 并绑定事件

Question

我正在尝试通过 AJAX 将新的 HTML 代码添加到 Angular 5 应用程序并将点击事件添加到元素。但是点击事件没有按预期工作，我不能使用 2 路数据绑定方式，因为我使用的是 jQuery 数据表插件，他将 HTML 添加到 Dom 而不是角度模板。

我试过了：

<button  (click)='myClassFunction()'>Click!</button>  this line does nothing
<button  onclick='myClassFunction()'>Click!</button>  this line said myClassFunction is undefined
<button  onclick='this.myClassFunction()'>Click!</button> this line said myClassFunction is undefined

如何将此点击事件绑定到我的函数？

Answer 1

Angular 是用 Typescript 编写的。

当您提供或构建您的应用程序时，此打字稿应用程序随后会被编译、缩小和丑化为原生 Javascript。

这意味着你的

(click)="myClassFunction()"

会变成类似

的东西

onclick="srgu.gferu()"

如您所见，Angular 无法识别这一点。

使用 JQuery 或插件都没关系：Angular 就是这样工作的。

为此，您需要创建窗口函数或全局函数。

myClassFunction() {
  // Create your window function, make it tslint compliant
  window['myWindowClassFunction'] = () => {
    // Your function's logic here
  };
}

现在，在您附加的 HTML 中，您需要编写

<button  onclick='window.myWindowClassFunction()'>Click!</button>