1

The URL I would like to generate is:
http://localhost:8000/Home/(fooOutlet:foo/(barOutlet:bar))

I have a router-outlet named 'Foo' and it contains a router-outlet named 'Bar'.
How can I show a component in Bar?
I created the codes below, but it doesn't do the trick:

this._router.navigate([{ outlets: { fooOutlet: 'foo', barOutlet: 'bar' } }], );
this._router.navigate([{ outlets: [{ fooOutlet: 'foo' }, { barOutlet: 'bar' }] }]);

It gives me this:

(fooOutlet:foo//barOutlet:bar)

But I need:

(fooOutlet:foo/(barOutlet:bar))

Hypenate
  • 1,907
  • 3
  • 22
  • 38
  • Possible duplicate of [Show component in nested router](https://stackoverflow.com/questions/58381534/show-component-in-nested-router) – Hypenate Oct 16 '19 at 08:57

1 Answers1

0

try 

this._router.navigate([{ outlets: { fooOutlet: 'foo'} },{ outlets: { barOutlet: 'bar'} }] );

I think your error is because when you call the method navigate in the way that you are doing is to show outlets that are at the same level (deep),

Ricardo
  • 2,427
  • 19
  • 35
  • 1
    I create this demo to reproduce your issue and I m having it https://stackblitz.com/edit/demo-deep-routing, I will investigate more about it – Ricardo Sep 10 '18 at 13:13
  • What I used to do, was navigate to levelA, and from there navigate to levelB, but we want to go there in 1 click. – Hypenate Sep 10 '18 at 13:21
  • I'm afraid there is a bug in the framework: https://github.com/angular/angular/issues/18928 – Hypenate Sep 11 '18 at 05:44
  • try a workaround, In ngOnInit() from the first component listen to a specific parameter, if this parameter comes then navigate to the next componet – Ricardo Sep 11 '18 at 13:09