如何在 Angular2 中绑定 JavaScript 事件？ （jQuery 数据表 + Angular2）

Question

For pagination and sorting jQuery data table is used

我在过滤器旁边添加了按钮

$("#example").DataTable({
  "ajax": "http://localhost:8090/all",
  "columns": [
    {"data": "name"},
    {"data": "email"},
    {"data": "qualification"},
    {"data": "designation"}
  ],
  "sAjaxDataProp": "",
  dom: 'l<"toolbar">frtip',
  initComplete: function () {
     $("div.dataTables_filter").append(_this.str);
  }
})

它创建了按钮，但 (click) 事件没有绑定。这是完整的代码sn-p

 import { Component, OnInit} from '@angular/core';
 import {Contact} from "./contact";
 import {ContactService} from "./contact.service";

  declare  var $:any;

  @Component({
      selector: 'app-contact',
      templateUrl: './contact.component.html',
      styleUrls: ['./contact.component.css']
  })
  export class ContactComponent implements OnInit {

       contacts : Contact[]=[];
       flag : any;

      str=' <button type="button" id="any_button" 
      class="btn-primary" (click)="hllo()"> Add Employee</button>';
    constructor(private contactService: ContactService) {
    }

   hello(){
      alert("Do something");
  }
  ngOnInit() {
  var _this=this;
   $("#example").DataTable({
        "ajax": "http://localhost:8090/all",
         "columns": [
         {"data": "name"},
         {"data": "email"},
         {"data": "qualification"},
         {"data": "designation"}
         ],
         "sAjaxDataProp": "",
         dom: 'l<"toolbar">frtip',
         initComplete: function () {
             $("div.dataTables_filter").append(_this.str);
          }
    })

   }
 }

这里有一些根本性的错误，请有人帮我解决这个问题吗？

Answer 1

你不应该（在常见的使用情况下）混合使用 jquery 和 angular2，最好在 dom 中定义元素，但用 *ngIf... 隐藏它们并绑定所有必要的属性。

更新：一些解决方法，但可以帮助您。我不得不将一个巨大的旧（部分预 jquery）代码项目改编为 angular2。它是一个树状的组件结构（即使在当时）。现在它是两种方法 old_code/angular2 的混合。您可以制作以下代码：

declare let window;
...
constructor() { window["my_unique_class_name"]=this;}
...
 str=' <button type="button" id="any_button" 
      class="btn-primary" onclick="my_unique_class_name.hello()"> Add Employee</button>';

...
 initComplete: () => {
             $("div.dataTables_filter").append(this.str);
          }

Answer 2

您不能在动态添加的 HTML 中使用任何类型的 Angular 绑定或组件/指令选择器，它们仅在静态添加到组件模板时才起作用。

你可以做的是通过注入ElementRef来强制添加它，查询元素并使用addEventHandler或一些类似的jQuery方法添加一个事件处理程序，如果你已经在使用它的话：

constructor(private elRef:ElementRef) {}

ngOnInit() {
  var _this=this;
   $("#example").DataTable({
        "ajax": "http://localhost:8090/all",
         "columns": [
         {"data": "name"},
         {"data": "email"},
         {"data": "qualification"},
         {"data": "designation"}
         ],
         "sAjaxDataProp": "",
         dom: 'l<"toolbar">frtip',
         initComplete: function () {
             $("div.dataTables_filter").append(_this.str);
             _this.elRef.nativeElement.querySelector('div.dataTables_filter > button').addEventHandler('click', _this.hello);
             // or just plain jQuery
             $("div.dataTables_filter > button").click(_this.hello);
          }
    })

 }