Angular2兒童路由

我有一些問題。讓我解釋Angular2兒童路由

這是我的html代碼

<div class="alert alert-danger alert-dismissable" *ngIf="errorMessage"> 
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
    <strong>{{ errorMessage }}</strong> 
</div> 
<h3 class="page-header">All Unread Report</h3> 
<table class="table table-hover"> 
    <thead> 
    <tr> 
     <th>NIK</th> 
     <th>Nama</th> 
     <th>Topik</th> 
     <th>Detail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let item of allcomplaint;let i= index"> 
     <td>{{i+1}}</td> 
     <td>{{item.sendername}}</td> 
     <td>{{item.topic}}</td> 
     <td> 
     <a class="btn btn-success" routerLink="/edit/{{item.id}}">Edit</a> 
     </td> 
    </tr> 
</tbody> 
</table>

我要的是，如果我點擊編輯按鈕鏈接，將導航到其他組件。但我總是得到錯誤這樣下面

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/1' Error: Cannot match any routes. URL Segment: 'edit/1

這是我的路由配置

{ path: 'dashboard_pool', component: DashboardPoolComponent, 
    children:[ 
    { path: 'unread', component: PoolUnreadReportComponent, 
     children:[ 
     {path:'detail/:id', component:PoolComplaintDetailComponent} 
     ] 
    },

如何解決這個問題？謝謝:)

來源

2017-06-16 dedypuji

你可以顯示'edit'的路由配置嗎？ –

你的意思是我的路由配置？這是在我的問題。或者你的意思是編輯鏈接的組件？ @SameerK – dedypuji

我猜你正在嘗試的URL是'dashboard_pool/unread/edit/1'，但是在'unread'的'children'下面，我沒有在你的問題中看到'edit'的路由配置，只存在'detail' 。可能是因爲你得到的錯誤.. –

嘗試用：

// inside PoolUnreadReportComponent.html 
<a class="btn btn-success" [routerLink]="['edit',item.id]">Edit</a> 

// inside DashboardComponent.html 
<a class="btn btn-success" [routerLink]="['unread/edit',item.id]">Edit</a>

使用參數的手工拼接避免和使用數組來傳遞值而不是（在所謂的鏈接參數陣列）。 Angular負責其餘部分。

約路由一些額外的信息：

../意味着你路由樹去上一級
./手段sybling
/意味着絕對路徑，[routerLink]="['/edit', item.id]"將根/編輯/ ：id例如

欲瞭解更多信息，請查閱routing docs

來源

2017-06-16 09:23:36

同樣的錯誤。未處理的承諾拒絕：無法匹配任何路由。 URL細分：'dashboard_pool/unread/edit/1';區域：角度;任務：Promise.then;值：我不知道我的代碼是否失敗。 :(。感謝幫助先生 – dedypuji

接下來的事情可能是錯誤的是，如果一個組件在路徑定義中有一個子組件，那麼它必須在html模板中包含元素，例如DashboardPoolComponent和PoolUnreadReportComponent應該有這個元素在他們的模板 –

很好。已完成。感謝您的幫助:) – dedypuji

這是因爲使用routerLink這樣的呼籲相對路徑。

如果你想要去的孩子，使用

<a class="btn btn-success" [routerLink]="'edit/' + item.id">Edit</a>

來源

2017-06-16 09:13:27 trichetriche

我不知道這個相對路徑。即時通訊使用這種角度。但是你寫的代碼仍然是錯誤的先生。像我的。不工作:) – dedypuji

或者我必須在我的PoolUnreadReportComponent中添加路由器插座？ – dedypuji

嗯，是的，你必須......對不起，我沒有考慮檢查它，我以爲你已經擁有它了！ – trichetriche

Angular2兒童路由

回答

相關問題