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指令来形成网址

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

Angular 2：如何在md-list-item中传递路由器？

3 个答案: