在网格列表中创建“视图”链接，该链接导航到详细路线，如Angular中的Hero/:id

Question

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

<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>

我如何使它成为一个导航到/heroes/：id的链接？我在路由配置中设置了此设置。我通过访问http://localhost:4200/heroes/1来验证它是否工作

我是否最好使用（click）事件并调用诸如viewHero（id）这样的函数。如果我这样做，我就不知道怎么通过身份证了。此外，如果它可以直接在html模板内的href标记或routerLink我也想知道如何做到这一点。我的主要问题似乎是访问href=“”等字符串中的h.id。

更新：我得到了以下工作，但仍然不高兴它：

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

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

必须有一种方法可以直接在锚标记中简单地完成此操作。我没有得到一个指针手指时悬停的链接。

Answer 1

试试看：

<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>