Javascript 创建一个'；视图'；网格列表中的链接，该链接导航到详细路线，如图中的hero/：id

在我的模板中，我正在执行以下操作：

<tbody>
  <tr *ngFor="let h of heroes">
    <td>{{ h.id}}</td>
    <td>{{ h.name}}</td>
    <td>{{ h.description}}</td>
    <td><a href="">View</a></td>
  </tr>
</tbody>

{{h.id}}
{{h.name}
{{h.description}}

我怎样才能使View成为一个指向/heros/：id的链接？我的路线配置中有此设置。我通过访问

我最好使用（单击）事件并调用viewHero（id）等函数。如果我这样做了，我不知道如何传递id。另外，如果可以直接在href标记或routerLink中的html模板内传递id，我也想知道如何传递id。我的主要问题似乎是访问诸如href=“”之类的字符串中的h.id

更新：我做了以下工作，但仍然不满意：

  <td><a (click)="viewHero(h)">View</a></td>

  viewHero(hero) {
    this.router.navigate(['/heroes', hero.id]);
  }

视图
查看英雄（英雄）{
这个.router.navigate（['/heros'，hero.id]）；
}

必须有一种方法可以直接在锚定标记内部执行此操作。悬停链接时，我没有收到指针指针。

请尝试以下操作：

<tbody>
  <tr *ngFor="let h of heroes">
    <td>{{ h.id}}</td>
    <td>{{ h.name}}</td>
    <td>{{ h.description}}</td>
    <td><a routerLink="/heroes/{{h.id}}">View</a></td>
  </tr>
</tbody>

{{h.id}}
{{h.name}
{{h.description}}
看法

有效，谢谢。我还注意到，在我的例子中，由于我的列表页面是/heroses，而我的详细信息页面是/heroses/id，所以我可以简单地将{{h.id}}作为routerLink，它仍然有效！