Angular 4: Multiple (named) router-outlets in a child route: supported

angular

I have a master-detail setup with also another section for "editing" a list item, all on 1 landing-route (in my sample app, the route is /stuff). The detail component is populated using the default router-outlet, and is located at /stuff/:index . I am trying to send the HTML to another router-outlet for the edit part via route /stuff/:index/edit, yet Angular cannot seem to recognize the route.

I went ahead and put a generalized version of the situation on Bitbucket:

https://bitbucket.org/squirrelsareduck/angularrouting/

Anyways, the general error is this:

Error: Cannot match any routes. URL Segment: 'stuff/1/edit'

Most-relevant parts of the code:

Routes definition:

const routes: Routes = [
  { path: 'stuff', component: AComponent, children:[
    { path: ':index', component: BComponent},
    { path: ':index/edit', component: EditComponent, outlet:'editsection'}
  ]}
];

a.component.html:

<ul>
  <app-listitem
    *ngFor="let a of items; let indexOI = index;"
    [index]="indexOI"
  [contentOI]="a">
  </app-listitem>
</ul>
<router-outlet></router-outlet>
<router-outlet name="editsection"></router-outlet>

b.component.html:

<p>
  Detail section works! {{ index }}
  <button
    type="button"
    [routerLink]="['edit',{outlets:{editsection:'/stuff/:index/edit'}}]">
    Edit
  </button>
</p>

edit.component.html (less relevant, but important to recognize)

<p>
  edit section works!
</p>

Best Answer

Apply these changes in the b.component.html and it should work as expected.

<p>
  Detail section works! {{ index }}
 <button type="button"
   [routerLink]="['/stuff',{outlets:{editsection:':index/edit'}}]">Edit</button>
</p>

For dynamic URL, using the routerLink, first, mention which route you want to go and then define the outlets and sub-routes as shown.

Related Topic