如何动态处理Mat Card中Manage按钮的点击导航逻辑？

所有数据均为动态获取，每张Mat Card中都有一个动态生成的Manage按钮。

示例：
点击User卡片的Manage按钮时需跳转到对应组件，如何识别点击的是哪个Manage按钮并确定跳转目标？

我通过服务器端数据创建了多张动态Mat Card，每张卡片都配有动态生成的Manage按钮。需求为点击User卡片的Manage按钮跳转到User组件，点击Log卡片的Manage按钮跳转到Log组件，以此类推。

我将所有卡片标题存储在一个变量中，通过循环遍历卡片标题，将每个卡片的key与特定字符串（例如判断key=='USER'）比较来实现跳转，但存在问题。

解决方法 #

1. 给卡片数据绑定路由信息

在后端返回的卡片数据中直接添加对应跳转的路由字段，或者前端给数据补充路由映射：

// 示例卡片数据（含路由字段）
cardData = [
  { title: 'User', route: '/user' },
  { title: 'Log', route: '/log' },
  { title: 'Settings', route: '/settings' }
];

2. 模板中直接绑定跳转逻辑

如果用Angular框架，直接用routerLink绑定路由，无需额外判断：

<mat-card *ngFor="let card of cardData">
  <mat-card-title>{{ card.title }}</mat-card-title>
  <button mat-button [routerLink]="card.route">Manage</button>
</mat-card>

如果需要跳转前做额外处理，就通过点击事件传递当前卡片对象：

<mat-card *ngFor="let card of cardData">
  <mat-card-title>{{ card.title }}</mat-card-title>
  <button mat-button (click)="goToManage(card)">Manage</button>
</mat-card>

组件类中处理逻辑：

import { Router } from '@angular/router';

constructor(private router: Router) {}

goToManage(card: any) {
  // 可在此添加权限校验、数据预处理等逻辑
  this.router.navigate([card.route]);
}

3. 替换硬编码判断（如果无法修改数据结构）

如果没法给数据加路由字段，就用映射表替代循环判断，避免硬编码漏洞：

// 标题与路由的映射表
titleToRoute = {
  'User': '/user',
  'Log': '/log',
  'Settings': '/settings'
};

goToManage(card: any) {
  const targetRoute = this.titleToRoute[card.title];
  if (targetRoute) {
    this.router.navigate([targetRoute]);
  }
}

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