How to navigate two outlets deep?

Question

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))

Answer 1

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),