如何在Angular中实现点击图片弹出大图（无需Dialog或纯CSS）

完全基于CSS实现，不需要任何脚本或Angular组件，核心利用复选框的状态切换来控制大图显示：

<!-- 结构示例 -->
<div class="image-modal-wrapper">
  <input type="checkbox" id="img-modal-trigger" class="modal-toggle">
  
  <!-- 缩略图（点击触发） -->
  <label for="img-modal-trigger" class="thumbnail">
    <img src="your-thumbnail.jpg" alt="缩略图">
  </label>
  
  <!-- 遮罩层 -->
  <label for="img-modal-trigger" class="modal-backdrop"></label>
  
  <!-- 弹出大图 -->
  <img src="your-large-image.jpg" alt="大图" class="modal-image">
</div>

/* 核心样式 */
.modal-toggle {
  display: none; /* 隐藏复选框 */
}

.thumbnail img {
  cursor: pointer;
  max-width: 200px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 99;
}

.modal-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  max-width: 90%;
  max-height: 90%;
  z-index: 100;
  transition: transform 0.3s ease;
}

/* 选中复选框后的状态切换 */
.modal-toggle:checked ~ .modal-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.modal-toggle:checked ~ .modal-image {
  transform: translate(-50%, -50%) scale(1);
}

点击缩略图或遮罩层都能触发状态切换，实现大图的弹出和关闭。

贴合Angular框架的状态管理逻辑，用模板语法替代原生DOM操作：

1. 组件模板（image-modal.component.html）

<div class="image-container">
  <!-- 缩略图 -->
  <img 
    [src]="thumbnailUrl" 
    alt="缩略图" 
    class="thumbnail"
    (click)="isModalOpen = true"
  >

  <!-- 遮罩层（点击关闭） -->
  <div 
    class="modal-backdrop"
    *ngIf="isModalOpen"
    (click)="isModalOpen = false"
  ></div>

  <!-- 弹出大图 -->
  <img 
    [src]="largeImageUrl" 
    alt="大图" 
    class="modal-image"
    *ngIf="isModalOpen"
  >
</div>

2. 组件逻辑（image-modal.component.ts）

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

@Component({
  selector: 'app-image-modal',
  templateUrl: './image-modal.component.html',
  styleUrls: ['./image-modal.component.css']
})
export class ImageModalComponent {
  isModalOpen = false;
  thumbnailUrl = 'path/to/thumbnail.jpg';
  largeImageUrl = 'path/to/large-image.jpg';
}

3. 组件样式（image-modal.component.css）

.thumbnail {
  cursor: pointer;
  max-width: 200px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99;
}

.modal-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  z-index: 100;
}

如果需要支持多张图片，可将图片数据存入数组，通过循环渲染缩略图，点击时动态切换大图地址即可。

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