如何在Angular 2中创建这个jQuery事件处理程序？

Question

我正在Angular 2中创建一个Web应用程序。在其中一个页面上，我使用一个名为jquery-comments的jQuery插件来启用用户注释。

现在，我想显示一个自定义对话框，如果用户点击了jquery-comments“回复”按钮。

如果是jQuery，我会做类似的事情：

$('.jquery-comments .reply').on('click', function (event) {
    event.preventDefault();
    ...here I can show my custom dialog box or something else        
});

但是如何在不更改jquery-comments插件的情况下在Angular 2中创建类似的事件处理程序？

Answer 1

您可以使用Angular附加事件处理程序单击，如此...

某些组件HTML

<div class="reply" (click)="showComments($event)"></div>

传递$ event将为您提供与使用vanilla js传递事件时相同的事件对象。

某个组件

    class someComponent {

      constructor() {
    }

    showComments(e) {
      e.preventDefault();
      // do the jquery stuff here.
    }

    }

Answer 2

  

在你的角度组件中，你应该引用一个DOM元素   模板使用@ViewChild（）视图初始化后你   可以使用此对象的nativeElement属性并传递给jQuery。

     

声明$（或jQuery）作为JQueryStatic会给你一个打字   参考jQuery。

参考：https://stackoverflow.com/a/30662773/510788

您可以在将jQuery注入组件后捕获单击。