javascript - 在网格列表中创建 'view' 链接，导航到详细路线，例如 Hero/:id in Angular

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>

如何才能使 View 成为导航到/heroes/:id 的链接？我的路线配置中有此设置。我通过访问 http://localhost:4200/heroes/1 验证它是否有效。

我是否最好使用(单击)事件并调用诸如 viewHero(id) 之类的函数。如果我这样做，我将不知道如何传递 id。另外，如果它可以直接在 href 标签或 routerLink 内的 html 模板内完成，我也想知道如何做到这一点。我的主要问题似乎是访问字符串内的 h.id，例如 href=""。

更新:我可以执行以下操作，但仍然不满意:

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

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

必须有一种方法可以直接在 anchor 标记内部简单地执行此操作。将鼠标悬停在链接上时，我没有看到食指。

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>