在angular 10中，如何关闭来自loop和toggle的部分

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)"
}
})

参考方法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;
});
}

与方法1

一样更新click函数

(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();
}

参考方法2工作例