Угловая выпадающая функция

Question

Я хочу поделиться, как сделать выпадающий в Angular.

Сначала вы можете определить класс директивы, включая определение класса, как open класс в Bootstrap .

Через @HostBinding определяется открытый класс.Через @HostListener, опция переключения определена.Если раскрывающийся список не нажат, раскрывающийся список не может быть открыт, поскольку isOpen равен false. Если щелкнуть раскрывающийся список, раскрывающийся список можно открыть как isOpen, равный true.

import { Directive, HostListener, HostBinding } from '../../../node_modules/@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  @HostBinding('class.open') isOpen = false;

  @HostListener('click') toggleOpen() {
    console.log('toggleOpen : ' + !this.isOpen);
    this.isOpen = !this.isOpen;
  }
}

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

export class DropdownDirective {

  @HostBinding('class.open') isOpen = false;

  @HostListener('document:click', ['$event']) toggleOpen(event: Event) {
    if (this.elRef.nativeElement.contains(event.target)) {
      console.log('if | this.isOpen : ' + !this.isOpen );
      this.isOpen = !this.isOpen;
    } else {
      console.log('else | this.isOpen : false');
      this.isOpen = false;
    }
  }
  constructor(private elRef: ElementRef, private renderer: Renderer2) {}
}

В части начальной загрузки

 <div class="btn-group" appDropdown>
          <button type="button" class="btn btn-primary dropdown-toggle">Manage <span class="caret"></span></button>
          <ul class="dropdown-menu">
              <li><a href="#">Add</a></li>
              <li><a href="#">Edit</a></li>
              <li><a href="#">Delete</a></li>
          </ul>
       </div>


<ul class="nav navbar-nav navbar-right">
          <li class="dropdown" appDropdown>
            <a class="dropdown-toggle" data-toggle="dropdown" role="button">Manage <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Save</a></li>
              <li><a href="#">Get Value</a></li>
            </ul>
          </li>
        </ul>