How to navigate to a route while a named outlet is child of an unnamed outlet
I am using Angular 5. I have one in app.component. I am dynamically routing to a particular component say 'dashboard'. this dashboard component have a named router-outlet and a set of child components. Now I have to change the content of the named router-outlet from dashboard component through router navigation. I have tried following navigation
1. this.router.navigate([{ outlets: { right: 'temp1' }}], {redirectTo: this.activatedRoute})
2. this.router.navigate(['/dashboard',{ outlets: { right: 'temp1' }}])
But both are failing and getting following error
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard'
While I am changing the browser url then its working but couldn't load through the navigation. I think its because of the parent . Any help would be appreciated.
Answer
how does your app.router look like? What is the url you are getting when it is calling for the route. I struggled myself to understand the relative routing within the routerlink. In two days time I can send u what works for me, but away from my pc atm.
If the relative address is wrong u could use ../dashboard to go one directory up. Or if you have routinga with the same name u might want to make sure and set the required pathMatch to full in the app.routing.
this.router.navigate([{ outlets: { right: [ 'dashboard',’temp’ ] }}]); Something like this should work.
https://www.concretepage.com/angular-2/angular-2-4-named-router-outlet-popup-example