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.For dynamic URL, using the
routerLink
, first, mention which route you want to go and then define the outlets and sub-routes as shown.