12

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?

nintschger
  • 1,786
  • 5
  • 30
  • 45

1 Answers1

12

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 ] }}]);

This way you can pass parameters to URL and URL became 

http://localhost:4200/book(bookList:book-detail//bookPopup:add-book)
Jayant Patil
  • 1,537
  • 2
  • 11
  • 18