主页 / 问题 / 950833
Accepted
Lex
Asked:2020-02-29 05:34:56 +0000 UTC2020-02-29 05:34:56 +0000 UTC

Angular中的自定义选择

  • 772

我正在做一个简单的 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;
  }

但它仅在您单击输出列表时才有效。在选择之外单击时如何关闭选择？听整个文件可能是不合理的？

javascript

1 个回答

  1. Best Answer

    最简单、最快和最具声明性的选项是创建一个自定义指令：

    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>

    或者您将指令应用于您的子元素，我只是不知道您的结构。

    • 0

相关问题