Angular2子路由答案

【问题标题】：Angular2 Child RoutingAngular2子路由
【发布时间】：2017-06-16 09:11:18
【问题描述】：

我有一些问题。让我解释一下

这是我的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>

我想要的是，如果我单击该编辑按钮链接，它将导航到其他组件。但我总是在下面遇到这样的错误

未捕获（承诺中）：错误：无法匹配任何路由。网址段： 'edit/1' 错误：无法匹配任何路由。 URL 段：'edit/1

这是我的路线配置

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

如何解决这个问题？谢谢:)

【问题讨论】：

你能显示edit的路由配置吗？？
你的意思是我的路由配置吗？这是我的问题。还是您的意思是编辑链接的组件？ @SameerK
我猜你正在尝试的 URL 是 dashboard_pool/unread/edit/1，但在 unread 的 children 下，我在你的问题中看不到 edit 的路由配置，只有 detail 存在。可能是因为你得到了错误..
对不起，先生。那是我的错。对不起先生。感谢那。你是最好的。对不起我的坏@SameerK
请不要抱歉 :-)

标签： angular

【解决方案1】：

尝试：

// 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]" 将是例如 root/edit/:id

更多信息请查看routing docs

【讨论】：

同样的错误。未处理的承诺拒绝：无法匹配任何路由。 URL 段：'dashboard_pool/unread/edit/1'；区域：角度；任务：Promise.then ；价值：我不知道我的代码是否失败。 :(。感谢先生的帮助
接下来可能出错的是，如果一个组件在路由定义中有一个子组件，那么它必须在 html 模板中包含元素。因此，例如 DashboardPoolComponent 和 PoolUnreadReportComponent 应该在其模板中包含此元素

【解决方案2】：

这是因为像这样使用routerLink 需要相对路径。

如果你想去找孩子，请使用

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

【讨论】：

我不知道那个相对路径。我是新来使用这个角度的。但是您编写的代码仍然是错误的先生。像我的一样。不工作:)
嗯，是的，你必须...对不起，我的错，我没想过要检查它，我以为你已经有了它！
未处理的承诺拒绝：无法匹配任何路由。 URL 段：'dashboard_pool/unread/edit/1'；区域：角度；任务：Promise.then ；价值：
我不知道先生。我必须在我的子组件 ts 文件 (PoolComplaintDetailComponent) 中添加一些东西吗？我没有添加任何东西，只是新鲜的组件