1

Based on the parent path /search, would like to resolve [NavigActionResolve] and activate child routes as below. 

path:'search',
component:SpaceComponent,
resolve: {
  navigAction: NavigActionResolve
},
children: [
  {
    path:'',
    component:SpaceProviderFiltersComponent,
    canActivate: [ShowProviderFiltersRouteGuard],
    outlet:'provider-filters'
  },
  {
    path:'',
    component:SpaceConsumerFiltersComponent,
        canActivate: [ShowConsumerFiltersRouteGuard],
        outlet:'consumer-filters'
  }
]

As I need to use both child outlets, I set the path as

path:''

so that both are picked by default. However, based on the conditions set in my guards, I want only one of these outlets to be active.

Guards [de]activate as below

ShowProviderFiltersRouteGuard

canActivate() {
    return Promise.resolve(this.componentStateService.isShowProviderFilters());
}

ShowConsumerFiltersRouteGuard

canActivate() {
    return Promise.resolve(!this.componentStateService.isShowProviderFilters());
}

Please note NOT [!] in above ShowConsumerFiltersRouteGuard related canActivate(). Hence, only one should be active at any point of time.

Below is how I used these outlets in my Html

<div class="mdl-cell mdl-cell--12-col columns">
    <router-outlet name="provider-filters"></router-outlet>
    <router-outlet name="consumer-filters"></router-outlet>
</div>

What I noticed is, as both child paths are same, both are deactivated and my routes are cancelled. My requirement is, I can't have separate paths for each and am wondering how I could make this work. Any advise please.

nsk
  • 1,413
  • 5
  • 24
  • 34
  • If your child paths won't activate, it's because your route guard is always returning false in the canActivate function. Check the code you put in this function. Also, if you wish to receive help, please post your guards code (at least their canActivate function.) – Maxime Flament Aug 03 '17 at 08:25
  • Updated with canActivate() code. thanks – nsk Aug 03 '17 at 16:37
  • Why do you need to return a `Promise.resolve(boolean)` in your guards? Isn't the `return boolean` enough? See this example that uses the `resolve` interface to conditionnally activate path components with data: https://sebastian-mueller.net/post/angular-2-router-resolve/ – Maxime Flament Aug 04 '17 at 10:07
  • Returning a boolean didn't work so tried with Promise. Looks neither worked for me – nsk Aug 04 '17 at 14:58

0 Answers0