如何使用TypeScript在HTML表格单元格中动态插入可正常工作的锚点标签

问题原因 #

你使用的[routerLink]、[queryParams]属于Angular专属的模板绑定语法，仅在Angular组件模板文件内、或是经过Angular编译器处理的内容中才会生效。通过innerHTML直接插入DOM的字符串不会被Angular编译，相关语法只会被识别为普通自定义属性，没有绑定任何路由跳转逻辑，因此点击无反应。

解决方案 #

方案1（推荐：符合Angular最佳实践）

直接在HTML模板中使用*ngFor指令渲染表格，无需手动操作DOM，天然支持模板绑定语法：

<html>
<head>
    <title>Student Homepage</title>
</head>
<body>
    <h1 align="center">Welcome to Student Homepage.</h1>
    <table class="center">
      <thead>
        <tr>
          <th>Sr.No</th>
          <th>Exam Name</th>
          <th>Link to Exam</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let currentExam of myData; let examNumber = index">
          <td>{{examNumber}}</td>
          <td>{{currentExam.examName}}</td>
          <td><a [routerLink]="['session']" [queryParams]="{id: currentExam.id}">Start Exam</a></td>
        </tr>
      </tbody>
    </table>
    <div id="container"></div>
</body>

修改后你可以直接删除原TS中手动操作DOM创建表格的代码，逻辑更简洁易维护。

方案2（保留手动创建DOM的逻辑）

如果你必须通过TS动态生成DOM，可注入Router服务通过编程式导航实现跳转，无需依赖模板绑定语法：

1. 先在组件中注入Router服务：

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

// 组件构造函数内注入
constructor(private router: Router) {}

2. 修改populateList方法，直接创建a标签并绑定点击事件：

populateList(){
  let table = document.querySelector("table");
  let data=["Sr.No","Exam Name","Link to Exam"];
  let thead = table!.createTHead();
  let row = table!.insertRow();  
  for (const key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }

  this.myData.forEach((currentExam:any,examNumber:any) => {
    let row=table!.insertRow();
    let cell = row!.insertCell();
    let text = document.createTextNode(`${examNumber}`)
    cell.appendChild(text);

    cell=row.insertCell();
    text=document.createTextNode(`${currentExam.examName}`);
    cell.appendChild(text);

    cell=row.insertCell();
    // 直接创建a标签，绑定跳转逻辑
    const link = document.createElement('a');
    link.textContent = 'Start Exam';
    // 绑定点击事件触发路由跳转
    link.addEventListener('click', () => {
      this.router.navigate(['session'], {
        queryParams: { id: currentExam.id }
      });
    });
    // 可选：添加普通链接样式
    link.style.cursor = 'pointer';
    link.style.color = '#1677ff';
    link.style.textDecoration = 'underline';
    cell.appendChild(link);
  });
}

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