角度 2:如何在 md-list-item 中传递路由器

Question

我正在使用md-nav-list填充对象列表。当用户点击一个md-list-item时，我想导航到候选详细信息路由器并传递candidate.id。

不确定如何在md-list-item上调用路由器。

  <md-nav-list *ngFor="let candidate of candidates">
    <md-list-item class="candidate-row">
      <div class="column2">
        <span class="name">{{candidate.name}},</span>
      </div>
    </md-list-item>
  </md-nav-list>

候选详细信息的路由器是
{path: 'candidate/:id', component: CandidateDetailsComponent}

其余代码可以在这里找到https://github.com/himanshuy/hiringplus-ui/tree/page2

Answer 1

您可以使用routerLink传递id，如下所示：

<md-list-item class="candidate-row" [routerLink]="['candidate',{id:candidate.id}]">
        ...
</md-list-item>

候选详细信息的路由器是

 {path: 'candidate/:id', component: CandidateDetailsComponent}

Answer 2

您可以使用

routerLink指令来形成URL

<a class="name" [routerLink]="['candidate', candidate.id]">
   {{candidate.name}},
</a>

Answer 3

您可以将 routerLink 指令添加到 md-list-item 组件（或任何其他组件）：

<md-list-item class="candidate-row" [routerLink]="['candidate', candidate.id]">
    ...
</md-list-item>