在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>