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儿童路由

回答

相关问题