2017-01-10 51 views
0

我使用md-nav-list填充對象列表。當用戶點擊一個md-list-item時,我想導航到候選細節路由器並通過candidate.id。不知道如何撥打路由器md-list-itemAngular 2:如何在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

回答

3

可以傳遞ID與routerLink如下圖所示:

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

候選細節的路由器是

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

發現你可以使用routerLink指令來形成URL

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

整個''是一個鏈接。需要在行級別指定某些內容。 –

+0

然後將其應用於'md-list-item'元素 –

0

你可以將routerLink指令添加到md-list-item組件已廢除(或任何其它組分):

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