Как генерировать событие в angular только для определенного элемента?

Я создаю директиву в angular, чтобы сделать всплывающее окно подтверждения с помощью всплывающего окна начальной загрузки, хотя для этого я смешиваю jQuery. В директивном файле код выглядит так:

@Output() confirmed = new EventEmitter();

constructor(
    private _ElementRef: ElementRef
) { }

ngOnInit() {
    $(this._ElementRef.nativeElement).popover({
        container: 'body',
        html: true,
        content: `
        <div class="text-center">
            <span class="d-block">Are you sure?</span>
            <div class="btn-group btn-group-sm mt-1">
                <button class="btn btn-outline-danger py-0" id="btn-confirm">Yes</button>
                <button class="btn btn-outline-primary py-0">No</button>
            </div>
        </div>`,
        placement: 'top',
        trigger: 'focus',
        boundary: 'window'
    });


    $('body').on('click', '#btn-confirm', () => {
        this.confirmed.emit();
    });

И в файле шаблона компонента:

<input appConfirmation (confirmed)="confirmed()" type="submit" value="Sign up" class="btn btn-primary btn-block">
<input appConfirmation (confirmed)="confirmed()" type="submit" value="Sign up" class="btn btn-primary btn-block">
<input appConfirmation (confirmed)="confirmed()" type="submit" value="Sign up" class="btn btn-primary btn-block">

Всякий раз, когда я нажимаю #btn-confirm, метод confirmed() выполняется в компоненте три раза. Как я могу сгенерировать событие для определенной кнопки за один раз?


angular jquery eventemitter bootstrap-popover
person X3Vikas    schedule 25.10.2018    source источник
comment
это потому, что все директивы будут иметь тот же идентификатор кнопки, что и btn-confirm   -  person Sarthak Aggarwal    schedule 25.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

Правильно определяйте область действия переменных, подключайте нужные функции, следуйте правилам HTML (идентификаторы уникальны), используйте фреймворк в полной мере, и я бы посоветовал прекратить использование JQuery, но, поскольку вы его используете, давайте продолжим.

@HostListener('click', ['$event'])
click(event) {

  const ID = Math.random().toString(36).slice(-8);

  $(this._ElementRef.nativeElement).popover({
    container: 'body',
    html: true,
    content: `
    <div class="text-center">
        <span class="d-block">Are you sure?</span>
        <div class="btn-group btn-group-sm mt-1">
            <button class="btn btn-outline-danger py-0" id="${ID}">Yes</button>
            <button class="btn btn-outline-primary py-0">No</button>
        </div>
    </div>`,
    placement: 'top',
    trigger: 'focus',
    boundary: 'window'
  });


  $('body').on('click', `#${ID}`, () => {
    this.confirmed.emit();
  });
}

Это связывает событие щелчка с функцией, то есть вы создаете всплывающее окно только при нажатии, и оно уничтожается при подтверждении. Ваши идентификаторы становятся уникальными, больше не создавая конфликтов. Для этого они создаются динамически.

person Community    schedule 25.10.2018
comment
(В случае, если это было непонятно, у вас не должно быть никакой функции ngOnInit) - person ; 25.10.2018
comment
Спасибо! Решил проблему, но, как вы предложили прекратить использование jQuery, как я смогу инициировать всплывающее окно (всякий раз, когда начальная загрузка уже использует jQuery). - person X3Vikas; 25.10.2018
comment
Я не знаю, что такое всплывающее окно, но JQuery не делает ничего, кроме абстрагирования сложного кода JS. Если вы хотите, чтобы какое-то наложение подтверждало действие пользователя, Angular Material предоставляет диалоговое окно, которое подходит больше, чем JQuery. Кроме того, вы можете просто создавать свои собственные компоненты и использовать Renderer Angular для их обработки. Это хорошая тренировка, которая учит вас многому об Angular! - person ; 25.10.2018