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

Question

我希望根据变量的值展开和收缩子div组件，但是我希望能够单击该组件(在同级的父组件中)并折叠它。

下面是一个stackblitz示例。我试图从我在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

问题是您的单击处理程序在文档单击事件处理程序将其设置为false之前将expanded设置为true，因此始终为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;
    }
  }