2017-02-08 4 views
2

Я создаю веб-приложение в Angular 2. На одной из страниц я использую плагин jQuery под названием jquery-comments, чтобы включить комментарии пользователей.Как сделать этот обработчик события jQuery в Angular 2?

Теперь я хотел бы показать пользовательское диалоговое окно, если пользователь нажмет кнопку jquery-comments «Ответить».

enter image description here

Если это JQuery, я хотел бы сделать что-то вроде:

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

Но как бы я сделать подобный обработчик событий в угловых 2, без изменения JQuery-плагина для комментариев?

ответ

0

Вы можете прикрепить обработчик события щелчок с Угловое как так ...

Некоторые Компонент HTML

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

Passing $ событие даст вам один и тот же объект события, который вы получите, просто передавая события с ванилью js.

Некоторые Компонентный

class someComponent { 

     constructor() { 
    } 

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

    } 
+0

Нет, это не сработает. Как я уже писал, я не хочу изменять код плагина jquery-comments, который должен был бы мне добавить, если бы я добавил обработчик события (click), как вы предлагаете. – brinch

+0

Я не думаю, что понимаю, что вы имеете в виду, изменив код плагина jquery. –

+0

Кнопка «Ответить» является частью плагина jquery-comment. Если я должен сделать

, мне нужно будет сделать это внутри плагина. – brinch

0

В вашей угловой компоненты вы должны ссылаться на DOM-элемент из шаблона с помощью @ViewChild() После того, как был инициализирован вам можно использовать свойство nativeElement этого объекта и перейти к jQuery.

Объявление $ (или jQuery) в виде JQueryStatic даст вам типизированную ссылку на jQuery для .

ссылка: https://stackoverflow.com/a/30662773/510788

Вы можете поймать щелчок после введения JQuery в компонент.

Смежные вопросы