Angular 2 - navigation of aux outlet affecting primary outlet

Question

Functional requirements ( because the technical issue didn't make sense to the audience):

An angular 2 app must configure itself at startup. if no query parameters are present ( e.g. default state ) it must show a default home and a default form. If query parameters are present instead, a customization process takes place. The customization process basically shows a customized home and form.

Technical requirements:

The plunker is an over-simplified version of actual functional requirements ( query parameters parsing omitted ) which basically switches the head component. The call should take place in the main component since the parsing logic ( not included in the plunker) lies there.

this.route.queryParams.filter(qp => !_.isEmpty(qp)).subscribe(qp => this.parseParameters(qp));

The router.navigate fails to perform the navigation in the named outlet ( header ) from AppComponent. The same code works if used inside a subcomponent ( e.g. DefaultComponent)

Here's the plunkr ( please look at the commented code)

DEMO : http://embed.plnkr.co/qyquCE4h5OX8sNLKM8lu/

Adding some tracing I found out the router cancelled the navigation:

Router Event: NavigationStart
- NavigationStart(id: 1, url: '/(header:head)')
Router Event: NavigationStart
- NavigationStart(id: 2, url: '/')
Router Event: NavigationCancel
- NavigationCancel {id: 1, url: "/(header:head)", reason: "Navigation ID 1 is not equal to the current navigation id 2"}

Question:

Are outlet trees mutually exclusive? In other words can I navigate the header outlet like this:

this.router.navigate(
[{
  outlets: {
    header: "head"
  }
}]

);

without affecting the primary outlet?

micronyks micronyks · Accepted Answer · 2016-10-02T16:47:25

Maybe I got what you want. When you run your app, you want headComponent in named outlet and default component in regular outlet.
right????

To do that you need to change your routes to following,

DEMO : https://plnkr.co/edit/lG66FIII9b9Xbi7YiHqc?p=preview

1)

const headerRoutes: Routes = [
  { path: '', component: DefaultComponent},
  { path: '', component: HeadComponent, outlet: headerOutlet}
];

NOTE: Now, you don't require below code,

ngOnInit() {

  /* now not required */  

  this.router.navigate(
    [{
      outlets: {
        header: "head"
      }
    }]
  );

}

2) This also solves your second(2) problem mentioned in your question.

Angular 2 - navigation of aux outlet affecting primary outlet

1 Answers