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

Question

我试图通过AJAX将新的HTML代码添加到Angular 5应用中，并将click事件添加到元素中。 但是click事件无法按预期工作，我不能使用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>