HostListener document:click для одного компонента среди множества копий?

Question

[Ivan Stroykin]

Доброго времени суток,

Есть компонент, который выводит строку при нажатии на которую всплывает форма для редактирования этой строки.
Этот компонент используется в таблицах, то есть в одной таблице ~ по 50 копий этого компонента.
Ну так вот, нужно сделать так, чтобы при клике вне области компонента, компонент закрывался.
Пишу так:

...
@HostListener('document:keyup', ['$event'])
public handleClick(event) {
  if (!this.editable.nativeElement.contains(event.target)) this.onClose();
}

Но при открытии и последующем клике вне области компонента данный метод срабатывает все 50 раз (сколько компонентов на странице). Из-за этого все немного затормаживается (пауза закрытия на 1,5 секунды)
Можно как-то разграничить компоненты между собою? Чтобы данный метод срабатывал только для открытого компонента?

Comments

[Алексей Зуев]

А зачем вы все компоненты инициализируете? Почему нельзя только только инициализировать, по которому кликнули?

[Ivan Stroykin]

Алексей Зуев: а можно поподробнее?) Просто этот компонент работает так: передаешь ему value, emptyText (в случае, если value пустое) и другое...И он отображает текст в span с разным содержимым и разными классами в зависимости от того, пустое value или нет.

[Алексей Зуев]

Иван Стройкин: Тут без plunker трудно понять что у вас есть.

[Ivan Stroykin]

Алексей Зуев: Plunker. У меня там с material design. Не стал подключать, сократил просто

[Алексей Зуев]

https://plnkr.co/edit/dSSFKpCVdgcyQFwpWUzl?p=preview

[Алексей Зуев]

Иван Стройкин: Директива будет инициализироваться когда template откроется, то есть когда isEdit true.

[Ivan Stroykin]

Алексей Зуев: Прекрасно ) Спасибо большое. Я правильно понимаю, что данную директиву можно использовать и в других подобных компонентах тоже?

[Алексей Зуев]

Иван Стройкин: нужно проверять) но в принципе может работать для любого места

[Ivan Stroykin]

Алексей Зуев: Премного благодарен :) Напишите в ответ? Может кому еще пригодится Ваш ответ

[Ivan Stroykin]

Алексей Зуев: Поставил себе. Идеально и очень быстро работает, спасибо ))

Answer 1

[Алексей Зуев]

Вы можете возложить обязанности по обработке закрытия на специальную директиву, которая может выглядить как

@Directive({
    selector: '[outsideClickHandler]',
})
export class OutsideClickDirective {
    @Output('outsideClickHandler') close = new EventEmitter();

    isOpen: boolean = false;

    constructor(private elRef: ElementRef) {}

    @HostListener('document:click', ['$event'])
    public handleClick(event) {
      if (!this.isOpen)  {
          this.isOpen = true;
      } else if (!this.elRef.nativeElement.contains(event.target)) {
          this.close.emit();
      }
    }
}

после этого легко используйте ее в своем шаблоне

<div class="editable-edit-box" (outsideClickHandler)="onClose()">

Живой пример