0

我正在研究在外部点击后应该关闭下拉菜单的指令。具有指令的元素*ngIf在单击时也有并且不存在于页面上，但指令仍在触发事件 - 因此下拉菜单永远不会打开，因为触发后立即showList变为。我该如何避免这种情况？false(click)="showList = true"

堆栈闪电战

import { Directive, HostListener, ElementRef, EventEmitter, Inject, PLATFORM_ID, Output, Input, OnInit, Renderer2, AfterContentInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective implements AfterContentInit {

  ngAfterContentInit(): void {
    this.contentInitialized = true;
  }
  @Input("clickOutside") config: any = {};
  @Output() clickOutside: EventEmitter<any> = new EventEmitter();
  private isBrowser: boolean = false;
  private isIE11: boolean = false;
  private contentInitialized: boolean = false;

  constructor(private renderer: Renderer2, private _el: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {
    this.isBrowser = isPlatformBrowser(platformId);
    this.isIE11 = this.isBrowser && !!(window as any).MSInputMethodContext && !!(document as any).documentMode;
  }

  @HostListener('document:click', ['$event'])
  public onClick(event) {
    console.log("CLICKED");
    if (this.contentInitialized && !(this._el.nativeElement.contains(event.target) || (event.target == window.document.querySelector(this.config.excludeLocator)))) {
      this.clickOutside.emit(event);
    }
  }

  @HostListener('document:keyup', ['$event'])
  private onKeyup(event) {
    if (event.keyCode == 27) {
      this.clickOutside.emit(event);
    }
  }

}
<div class="menu-trigger" (click)="showList = true"></div>
<ul class="list" *ngIf="showList" (clickOutside)="showGiftList = false">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

4

1 回答 1

1

为了避免父事件运行，您需要从子元素中停止它，您可以通过

$event.stopPropagation();

该event.stopPropagation()方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

如果您想学习一些基础知识并推进更多HTML 事件，您可以查看此内容。

于 2018-08-21T11:31:39.040 回答