角度下拉功能

Question

我想分享如何在Angular中下拉。

首先，您可以在 Bootstrap 中将包含类定义的指令类定义为 open 类。

通过@HostBinding，定义了开放类。 通过@HostListener，定义了切换选项。如果未单击下拉菜单，则无法打开isOpen为false的下拉列表。如果单击下拉菜单，则可以以isOpen为{{1 }}。

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;
  }
}

在Bootstrap部分，

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) {}
}