如何使用Angular实现选中图片的预览及单选切换功能

问题核心是选中状态没有全局统一管理，每个图片项各自维护选中状态，导致点击时所有项的选中状态独立切换，出现全选的情况。以下是实现单选+预览的具体方案：

1. 重构状态管理逻辑 #

把选中状态从子组件（grid-item）转移到父组件（grid），由父组件统一维护当前选中的图片索引或对象，确保全局只有一个选中项。

父组件（GridComponent）代码修改 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent {
  public images: Array<object> = [
    {
      src: 'https://picsum.photos/250/250/?image=110',
      description: '豪华酒店之夜',
      price: 250
    },
    {
      src: 'https://picsum.photos/250/250/?image=58',
      description: '探索岛上动物之旅',
      price: 160
    }
  ];
  // 维护当前选中的图片索引
  selectedImageIndex: number | null = null;
  // 存储当前选中的图片对象，用于预览
  selectedImage: any = null;

  // 处理子组件的选中事件
  onImageSelect(index: number) {
    this.selectedImageIndex = index;
    this.selectedImage = this.images[index];
  }
}

父组件模板修改 #

添加预览区域，并通过*ngFor循环渲染子组件时，传递选中状态和绑定选中事件：

<div class="grid">
  <app-grid-item 
    *ngFor="let item of images; let i = index"
    [item]="item"
    [isSelected]="selectedImageIndex === i"
    (imageSelect)="onImageSelect(i)"
  ></app-grid-item>
</div>

<!-- 选中图片预览区域 -->
<div *ngIf="selectedImage" class="preview-container">
  <h3>选中预览</h3>
  <img [src]="selectedImage.src" class="preview-image" alt="{{ selectedImage.description }}">
  <p>{{ selectedImage.description }}</p>
  <span>价格: {{ selectedImage.price }}</span>
</div>

2. 子组件（GridItemComponent）代码修改 #

子组件不再维护自己的选中状态，改为接收父组件传递的isSelected属性，并通过事件通知父组件自己被点击：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-grid-item',
  templateUrl: './grid-item.component.html',
  styleUrls: ['./grid-item.component.scss']
})
export class GridItemComponent {
  @Input() item: any;
  @Input() isSelected: boolean = false;
  // 定义事件，通知父组件当前项被选中
  @Output() imageSelect = new EventEmitter<number>();

  onSelect() {
    this.imageSelect.emit();
  }
}

子组件模板修改 #

移除本地的selected变量，改用父组件传递的isSelected控制选中样式：

<div class="image__container" [ngClass]="{ 'selected': isSelected }">
  <img class="image" [src]="item.src" alt="{{ item.description }}">
  <div class="image__description" (click)="onSelect()">
    <div class="image__description--content">
      <div class="image__description--price">
        {{ item.price }}
      </div>
    </div>
  </div>
</div>

方案说明 #

• 父组件统一管理选中状态，确保同一时间只有一个图片被标记为选中
• 子组件仅负责渲染和触发选中事件，状态由父组件控制，避免了多组件状态不一致的问题
• 预览区域通过*ngIf控制显示，仅当有选中图片时才展示，内容直接绑定父组件的selectedImage对象

内容的提问来源于stack exchange，提问作者Rajasekhar