代码之家 › 专栏 › 技术社区 › godblessstrawberry

Angular 5为封装到*ngIf=false中的元素触发自定义指令

angular-directive angular2-directives angular5 angular

0

godblessstrawberry · 技术社区 · 8 年前

我正在做的指令应该关闭下拉后,点击外部。有指令的元素也有 *ngIf 并且在单击时不在页面上,但指令仍在触发事件,因此下拉列表从未打开为 showList 变成 false 紧接着 (click)="showList = true"

stackblitz

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>

1 回复 | 直到 8 年前

1

Nasiruddin Saiyed 8 年前

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

$event.stopPropagation();

这个 event.stopPropagation() 方法停止事件的冒泡执行。

如果你想学习一些基本知识并取得更多进展 HTML事件 你可以查一下 this 出去。