如何在Angular2中绑定JavaScript事件？ （jQuery datatable + 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）事件没有绑定。这是完整的代码段

 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隐藏它们并绑定所有必要的属性。

更新：一些解决方法，但可以帮助你。我不得不将一个庞大的旧（部分pre-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);
          }
    })

 }