检测子组件外部点击的简单方法

Question

我想根据变量的值扩展和收缩子 div 组件，但我希望能够单击该组件（在兄弟的父组件中）以及折叠它。

这是一个stackblitz 示例。我尝试使用在this question 中找到的HostListener，但这对我的情况没有帮助。

 @HostListener('document:click', ['$event'])
    documentClick(event: MouseEvent) {
        // your click logic
    }

目标：

1. 当我单击子 (hello) 组件时，如果它还没有展开，我希望它展开，如果它已经展开，我希望它收缩
2. 当我单击其他任何内容（即父组件或同级组件）时，我希望子 (hello) 组件在展开时收缩。

我不希望子 (hello) 组件在单击父/兄弟时展开。

更新：使用 HostListener

hello.component.html

<div class="box" (click)="clicked()" [ngClass]="{large: isEnlarged}">Hello.component</div>

hello.component.ts

export class HelloComponent  {
  isEnlarged = false;

  clicked() {
    this.isEnlarged = !this.isEnlarged;
  }

  @HostListener('document:click', ['$event'])
  documentClick(event: MouseEvent) {
    console.log('clicked');
    this.isEnlarged = false;
  }
}

app.component

export class AppComponent  {

}

Answer 1

问题是您的点击处理程序将 expanded 设置为 true 之前文档点击事件处理程序将其设置为 false，因此它始终为 false。

如果事件目标不是您的组件，您只能将其设置为 false：

https://stackblitz.com/edit/mouse-click-anywhere-8bwg6p?file=src/app/hello.component.ts

  @HostListener('document:click', ['$event'])
  documentClick(event: MouseEvent) {
    console.log('clicked');
    console.log(event);
    if (event.target.id !== 'box') {
      this.isEnlarged = false;
    }
  }