Question

我想根据变量的值来展开和收缩子div组件，但是我希望能够单击该组件（在同级父控件中）并将其折叠。

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

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

目标：

当我单击子组件（hello）时，我希望它扩展（如果尚未扩展），并使其收缩（如果已扩展）
当我单击其他任何项（即父项或同级组件）时，我希望子项（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;
  }
}

应用组件

export class AppComponent  {

}

Answer 1

问题是您的点击处理程序将expanded设置为true，然后在文档点击事件处理程序中将@HostListener('document:click', ['$event']) documentClick(event: MouseEvent) { console.log('clicked'); console.log(event); if (event.target.id !== 'box') { this.isEnlarged = false; } }设置为false，因此始终为false。

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

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

kops create cluster --zones eu-west-1a ${NAME} --master-size t2.large

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

1 个答案: