Menu
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?
682
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.
router. navigate() method is used to navigate to a specific URL programmatically.
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
