Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 682
RagnarLodbrok Avatar asked May 29 '18 11:05

RagnarLodbrok


People also ask

What is the use of router outlet ></ router outlet?

The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted. Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application.

Which of the following method is used to navigate to specific URL programmatically?

router. navigate() method is used to navigate to a specific URL programmatically.

How does router navigate work?

navigate method, you must supply the ActivatedRoute to give the router knowledge of where you are in the current route tree. After the link parameters array, add an object with a relativeTo property set to the ActivatedRoute . The router then calculates the target URL based on the active route's location.


1 Answers

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)
like image 52
Jayant Patil Avatar answered Sep 29 '22 13:09

Jayant Patil