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

验证了它的工作原理

我最好使用（click）事件并调用viewHero（id）等函数。如果我这样做，我不确定如何传递id。此外，如果它可以直接在href标签或routerLink中的html模板内部完成，我想知道如何做到这一点。我的主要问题似乎是访问字符串中的h.id，例如href =＆＃34;＆＃34;。

更新：我有以下工作，但仍不满意：

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

创建一个＆＃39;视图＆＃39;链接到网格列表中导航到Angular

1 个答案: