4

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.

Atanu Mallick
  • 266
  • 4
  • 7
  • Can you show your HTML and current route config? I am not sure I follow the question so the HTML may help. You are saying you have an app.component with an HTML template that contains a `` (named) field, then based on the triggered route you are trying to load different component into the router-outlet yes? For me, it is unclear what routes you have defined and how your route-outlet is setup. – ToddB Jan 01 '18 at 20:02

2 Answers2

1

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

oudekaas
  • 325
  • 1
  • 6
  • 21
0

this.router.navigate([{ outlets: { primary: 'dashboard', right: 'temp1' }}])

something like this should help

Valery Kozlov
  • 1,557
  • 2
  • 11
  • 19