1

Делаю простой селект на Angular.

  <div class="select">
    <div (click)="showItem()">{{value}}</div>
    <div *ngIf="visible">
      <div #ref (click)=select(ref) class="option" *ngFor="let item of items">{{item}}</div>
    </div>
  </div>

Показываю и прячу выпадающий список так:

  showItem() {
    this.visible = !this.visible;
  }

Но он срабатывает только при клике на выдадающем списке. Как закрыть селект при клике вне селекта? Слушать весь документ наверное нерационально?

1 ответ 1

0

Самый простой, быстрый и декларативный вариант - создать кастомную директиву:

import {
  Directive,
  ElementRef,
  Output,
  EventEmitter,
  HostListener
} from '@angular/core';

@Directive({ selector: '[appOutsideClickListener]' })
export class OutsideClickListenerDirective {
  @Output()
  public clickOutside = new EventEmitter<void>();

  constructor(private host: ElementRef<HTMLElement>) {}

  @HostListener('document:click', ['$event.target'])
  public click(target: HTMLElement): void {
    const clickedInside = this.host.nativeElement.contains(target);

    if (clickedInside) {
      return;
    }

    this.clickOutside.emit();
  }
}

Добавить в декларации модуля и использовать следующим образом:

<div class="select" appOutsideClickListener (clickOutside)="showItem()">
  ...
</div>

Либо же применяете директиву к вашему дочернему элементу, я не знаю просто вашей структуры.

19
  • Спасибо! Пишет ошибку - Argument of type 'EventTarget' is not assignable to parameter of type 'Node'.
    – Lex
    28 фев 2019 в 22:12
  • @Lex, обновил ответ 28 фев 2019 в 22:13
  • В консоли выводит TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
    – Lex
    28 фев 2019 в 22:19
  • покажите как вы используете эту директиву? 28 фев 2019 в 22:25
  • Так как Вы написали - добавил в первую строку : <div class="select" appOutsideClickListener (clickOutside)="showItem()">
    – Lex
    28 фев 2019 в 22:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.