Как отразить событие в угловом только для определенного элемента? - PullRequest
Новая
       29

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

0 голосов
/ 25 октября 2018

Я создаю директиву 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() выполняется три раза всоставная часть.Как я могу отправить событие для определенной кнопки за один раз?

1 Ответ

0 голосов
/ 25 октября 2018

Правильно распределите ваши переменные, установите правильные функции, следуйте правилам 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();
  });
}

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

...