Search code examples
angularangular-routing

how to use Router.navigate() with named router outlet and url parameter

I have troubles using named router outlet, I think I am using it wrong although I assume I followed the angular docs:

router configuration:

const routes: Routes = [

    {path: 'checktypes', component: ChecktypeComponent},
    {path: 'checktypes/:id', component: ChecktypeDetailsComponent, outlet: 'checktypeDetails'},

  ];

template of ChecktypeComponent:

...
<router-outlet name="checktypeDetails"></router-outlet>
...

In the ChecktypeComponent (on route /checktypes):

this.router.navigate([{outlets: {checktypeDetails: ['checktypes', 1]}}]);

I hardcoded the id 1 just for the sake of simplicity. I always get the error Cannot match any routes. URL Segment: 'checktypes/1'. I tried a lot of stuff but I can't get it to work. What am I doing wrong?

Solution

  • You can use as following

    For route like

    {
 path: 'update-book/:book-id',
 component: BookUpdateComponent,
 outlet: 'bookPopup' 
}

    You can navigate as

    this.router.navigate([{ outlets: { bookPopup: [ 'update-book', book.id ] }}]);

    The resulting URL will have the following structure:

    http://localhost:4200/book(bookList:book-detail//bookPopup:add-book)