Angular14实现类Gmail可点击div 点击展示TS组件数组数据

你可以按照以下两步改造现有代码，实现点击邮件条目展示对应详情的效果，交互逻辑和Gmail网页端一致：

第一步：改造组件TS逻辑 #

在组件类中新增变量存储当前选中的邮件，同时改造showMessage方法接收传入的当前点击邮件对象，代码如下：

import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html',
  styleUrls: ['./inbox.component.css']
})
export class InboxComponent implements OnInit {
  // 存储当前被选中的邮件
  selectedMail: any = null;
  mail = [] as any;

  constructor() { 
    this.mail = [
      {
        id: 1,
        subject: 'test1',
        sender: 'op',
        message: 'hello, how are you',
      },
      {
        id: 2,
        subject: 'test2',
        sender: 'ak',
        message: 'hi,who are you'
      }
    ]
  }
  
  ngOnInit(): void {}
  
  // 接收点击传入的邮件对象，赋值给选中变量
  showMessage(mailItem: any) {
    this.selectedMail = mailItem;
  }
}

第二步：改造HTML模板 #

修改列表项的点击事件，把当前循环的邮件对象作为参数传入方法，同时新增详情展示区域，仅当存在选中邮件时渲染，代码如下：

<!-- 邮件列表区域 -->
<div 
  class="mails" 
  *ngFor="let obj of mail; index as i" 
  (click)="showMessage(obj)" 
  [class.selected]="selectedMail?.id === obj.id"
  style="cursor: pointer; padding: 12px; border-bottom: 1px solid #eee;"
>
    <div class="mail-item-title">
        {{obj.id}} - {{obj.sender}}
    </div>
</div>

<!-- 邮件详情区域，选中邮件后才显示 -->
<div class="mail-detail" *ngIf="selectedMail" style="margin-top: 24px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 4px;">
  <h3>{{selectedMail.subject}}</h3>
  <p>*发件人：*{{selectedMail.sender}}</p>
  <p>*邮件内容：*{{selectedMail.message}}</p>
</div>

可选优化项 #

• 实现选中高亮效果：在inbox.component.css中添加样式.selected { background-color: #f2f6fc; }，即可还原Gmail的选中条目视觉效果
• 实现点击空白收起详情：给组件最外层容器绑定点击事件(click)="selectedMail = null"，同时给邮件列表项、详情容器添加(click)="$event.stopPropagation()"阻止事件冒泡，避免点击内容区域时误触发收起逻辑

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