Question

当我单击某个元素时，如何在Angular上添加eventlistener或其他元素，以隐藏通过<div>显示的内容？ / p>

说明：当您点击*ngIf时，我通过*ngIf显示了一个自定义CSS下拉菜单，我希望用户能够点击他们的次数最多希望在自定义下拉菜单中，但是当他们在自定义下拉菜单之外单击时，我想再次通过<label>Filter</label>隐藏自定义下拉菜单。

用户单击标签时调用的方法是*ngIf，它将showHideSectionOptions()变量切换为showHide或true。

这是我的HTML代码：

false

这是我的组件代码：

showHide = false;

<div class="form-row">
  <div class="form-group" id="showAndHideSections">
    <label (click)="showHideSectionOptions()">
      <img src="../../../assets/icons/Filter.png" alt="" class="mr-3">Filter</label>
    <div *ngIf="showHide" class="section-options">
       // show or hide content
    </div>
  </div>
</div>

我尝试按照以下方式添加事件监听器，但是由于出现以下错误，因此无法设置showHideSectionOptions() { this.showHide = !this.showHide; }变量的值：类型'HTMLElement'不存在属性'showHide' '.ts（2339）：

showHide

谢谢！

Answer 1

首先，这已经有了答案here

但是，如果要使用Angular解决方案，则可以使用自定义指令：

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Output()
  readonly clickOutside = new EventEmitter<MouseEvent>();

  @Input()
  include?: HTMLElement;

  constructor(private el: ElementRef<HTMLElement>) {}

  @HostListener('window:click', [ '$event' ])
  onClick(event: MouseEvent): void {
    if (this.isEventOutside(event)) {
      this.clickOutside.emit(this.event);
    }
  }

  private isEventOutside(event: MouseEvent): boolean {
    const target = event.target as HTMLElement;

    return !this.el.nativeElement.contains(target) &&
        (!this.include || !this.include.contains(target))
  }
}

您可以这样使用：

<div class="form-group" id="showAndHideSections">
  <label (click)="showHideSectionOptions()" #label>
    <img src="../../../assets/icons/Filter.png" alt="" class="mr-3">
    Filter
  </label>
  <div *ngIf="showHide" class="section-options"
       [include]="label" (clickOutside)="showHide = false">
     // show or hide content
  </div>
</div>

性能更高的人将是在ngZone之外跑的人。由于订阅发生在指令外部，因此在订阅Output

时，订阅将位于ngZone内部

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Input()
  include?: HTMLElement;

  @Output()
  readonly clickOutside = this.nz.runOutsideAngular(
    () => fromEvent(window, 'click').pipe(
      filter((event: MouseEvent) => this.isEventOutside(event))
    )
  );

  constructor(private el: ElementRef<HTMLElement>, private nz: NgZone) {}

  private isEventOutside(event: MouseEvent): boolean {
    const target = event.target as HTMLElement;

    return !this.el.nativeElement.contains(target) &&
        (!this.include || !this.include.contains(target))
  }
}

working stack

当用户在特定元素（角度）之外单击时，使用* ngIf隐藏HTML元素

1 个答案: