如何关闭来自循环的外部点击部分并在角度 10 中切换

Question

我有一些图像和信息文本，所以当我点击图像时，特定的信息文本用于切换/显示。此外，如果以前的信息文本被打开，这将隐藏，下一个信息文本将在单击任何其他图像时显示。现在我的要求是关闭外部的信息文本，如果它打开的话。这是下面的代码。 https://stackblitz.com/edit/angular-mb2rmb?file=src%2Fapp%2Fapp.component.html

app.component.html

<hello name="{{ name }}"></hello>
<h3>How to show info of clicked image only</h3>

<div *ngFor="let x of things; let i = index">
  <img
    src="https://source.unsplash.com/200x200"
    alt="loading"
    (click)="clicked(i)"
  />

  <div *ngIf="x.show">
    <div class="names">
      <div class="fullName">{{ x.data }}</div>
      <div>{{ x.data2 }}</div>
    </div>
  </div>
</div>

app.component.ts

import { Component,Renderer2,ElementRef,ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  previousIndex: number = -1;
  public show: boolean = false;
  @ViewChild('toggleButton') toggleButton: ElementRef;
  @ViewChild('menu') menu: ElementRef;
  
  
  clicked(index) {
    // Checking if same picture clicked or new
    if (this.previousIndex >= 0 && this.previousIndex != index) {
      //  If new picture is clicked then closing previous picture
      this.things[this.previousIndex].show = false;
    }
    // Updating index
    this.previousIndex = index;
    this.things[index].show = !this.things[index].show;
  }

  public things: Array<any> = [
    {
      data: 'information for img1:',
      data2: 'only the info img1 is displayed',
      show: false,
    },
    {
      data: 'information for img2:',
      data2: 'only the info for img2 is displayed',
      show: false,
    },
    {
      data: 'information for img3:',
      data2: 'only the  info for img3 is displayed',
      show: false,
    },
  ];
}

Answer 1

方法 1
更改clicked 函数以将事件作为参数

(click)="clicked(i, $event)"

&

clicked(index, event) {
    // Checking if same picture clicked or new
    if (this.previousIndex >= 0 && this.previousIndex != index) {
      //  If new picture is clicked then closing previous picture
      this.things[this.previousIndex].show = false;
    }
    // Updating index
    this.previousIndex = index;
    this.things[index].show = !this.things[index].show;
    event.stopPropagation();
}

为主机添加另一个功能：

  hostClick(e) {
    this.things.forEach((element)=>{
      element.show = false;
    });
  }

并使用主机点击事件更新 component 元数据

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    "(click)": "hostClick($event)"
  }
})

供参考，Working example for method 1

基本上，event.stopPropagation(); 可防止当前事件进一步传播到主机点击事件。主机点击事件在主机（组件）内的任何地方触发。

方法 2
将 HostListener 导入组件

import { Component,Renderer2,ElementRef,ViewChild, HostListener } from '@angular/core';

并使用HostListener绑定函数

@HostListener("click", ["$event"])
   hostClick(event: any): void {
    this.things.forEach((element)=>{
          element.show = false;
        });
   }

更新被点击的函数和方法一一样

(click)="clicked(i, $event)"

&

clicked(index, event) {console.log(index);
    // Checking if same picture clicked or new
    if (this.previousIndex >= 0 && this.previousIndex != index) {
      //  If new picture is clicked then closing previous picture
      this.things[this.previousIndex].show = false;
    }
    // Updating index
    this.previousIndex = index;
    this.things[index].show = !this.things[index].show;
    event.stopPropagation();
  }

供参考，Working Example for method 2