Angular2 Child Routing

Question

i have some problem. let me explain

this is my html code

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

what i want is if i click that edit button link it will navigate to other component. but i always get error like this below

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

this is my route config

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

how to resolve this? thanks :)

Answer 1

It's because using routerLink like that calls for a relative path .

If you want to go to the child, use

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

Answer 2

Try with:

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

Avoid using manual concatenation of parameters and use an array to pass the values instead (the so called link parameters array ). Angular takes care of the rest.

Some extra info about routing:

• ../ means that you go one level up in the route tree
• ./ means sybling
• / means absolut path, [routerLink]="['/edit', item.id]" would be root/edit/:id for example

For more info check the routing docs