Угловой выпадающий переключатель и закрытие снаружи - PullRequest
Новая
       12

Угловой выпадающий переключатель и закрытие снаружи

0 голосов
/ 29 марта 2019

Я работаю над компонентом навигации, в котором есть несколько событий щелчка, и мне нужна ваша помощь:)

В моем HTML 

<ul class="nav-right">
<li (click)="toggleDropdown('item1')" (clickOutside)="clickEvent($event)">
  <span class="selector">
    my Selector
  </span>

  <ul *ngIf="isActive('item1')">
    <li *ngFor="let value of values">
          {{city.name}}
    </li>
  </ul>
</li>

<li (click)="toggleDropdown('other')" (clickOutside)="clickEvent($event)">
  <span class="selector">
    Other
  </span>
  <ul *ngIf="isActive('other')">
    <li *ngFor="let otherValue of otherValues">
        {{otherValue.name}}
    </li>
  </ul>
</li>

Тогда В моем компоненте у меня есть пара событий для переключения между компонентами 

toggleDropdown(menu: any) {
   this.activeMenu = this.activeMenu === menu ? 0 : menu;
}

isActive(menu: string): boolean {
  return this.activeMenu === menu;
}

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

@Directive({ selector: '[clickOutside]' })
export class ClickOutsideDirective {
@Output() clickOutside = new EventEmitter<MouseEvent>();

constructor(private elementRef: ElementRef) { }

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent): void {
const targetElement = event.target as HTMLElement;

if (targetElement && !this.elementRef.nativeElement.contains(targetElement)) {
  this.clickOutside.emit(event);
    }
  }
}

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

Заранее спасибо!

1 Ответ

0 голосов
/ 04 апреля 2019

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

(clickOutside)="clickEvent($event)"

до 

<ul class="nav-right">

Итак, в конце моя HTML-разметка: 

<ul class="nav-right" (clickOutside)="clickEvent($event)">
  <li (click)="toggleDropdown('item1')">
    <span class="selector">
     my Selector
    </span>

  <ul *ngIf="isActive('item1')">
     <li *ngFor="let value of values">
      {{city.name}}
    </li>
  </ul>
</li>

 <li (click)="toggleDropdown('other')">
   <span class="selector">
     Other
   </span>
   <ul *ngIf="isActive('other')">
     <li *ngFor="let otherValue of otherValues">
       {{otherValue.name}}
     </li>
   </ul>
 </li>
</ul>

Потому что я хотел закрыть все выпадающие списки, когда кто-нибудь щелкает за пределами навигационной панели

...