Angular Material mat-table单个td单元格内多超链接独立跳转实现

问题根源 #

硬编码固定数量<a>标签、手动插入分隔符的方案，本质是把渲染规则写死在模板里，完全不匹配数据源中实际的链接数量变化：单链接时会遗留多余逗号，3个以上链接时分隔符数量不足，自然出现适配问题。核心解决思路是将渲染逻辑从模板硬编码，转为数据源驱动。

具体实现步骤 #

• 统一重构列的数据源结构，把原本零散的链接值，改成统一的数组格式存储
  不管单元格内实际要展示0个、1个还是N个链接，都统一存为数组，每个元素单独存链接的展示文本和跳转目标，例如：

  // 表格行内链接列的标准数据结构
  linkList: Array<{ label: string; routePath: string }> = [
    { label: 'www.example.com', routePath: '/example' },
    { label: 'www.test.com', routePath: '/test' }
  ]
  

• 模板内做动态遍历渲染，不写死固定数量的a标签和分隔符
  直接在mat-table的单元格模板中，通过*ngFor循环遍历当前行的链接数组，仅在非末尾的链接后自动插入逗号分隔符，完全由循环逻辑控制输出内容：

  <ng-container matColumnDef="links">
    <th mat-header-cell *matHeaderCellDef> 关联地址 </th>
    <td mat-cell *matCellDef="let row">
      <ng-container *ngFor="let item of row.linkList; let isLast = last">
        <a [routerLink]="item.routePath">{{ item.label }}</a>
        <!-- 仅当前元素不是数组最后一项时，输出分隔符 -->
        <span *ngIf="!isLast">, </span>
      </ng-container>
    </td>
  </ng-container>
  

方案适配性说明 #

• 完全避开硬编码a标签的适配坑：模板内没有写死固定数量的a标签，所有链接元素都是根据数据源动态生成的，不存在写死两个a标签导致单链接时多余内容的问题
• 完全适配单链接无逗号的场景：当数组只有1个元素时，循环内的分隔符判断条件不满足，自然不会输出多余逗号
• 支持任意数量的链接渲染：数组有N个元素就渲染N个链接，自动在中间插入对应数量的分隔符，不需要修改模板代码
• 每个链接的跳转逻辑独立绑定，点击时直接触发对应路由跳转/详情页打开逻辑，不会出现点击错位的问题
• 后续要调整分隔符样式、替换分隔符文本、给链接加新窗口打开属性等改动，只需要统一修改循环内的渲染模板，不需要逐个调整硬编码的a标签

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