1

根据父路径 /search，想解析 [NavigActionResolve] 并激活子路由，如下所示。

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

由于我需要同时使用两个子插座，因此我将路径设置为

小路：''

以便默认选择两者。但是，根据我的守卫中设置的条件，我希望这些出口中只有一个处于活动状态。

守卫[de]激活如下

ShowProviderFiltersRouteGuard

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

ShowConsumerFiltersRouteGuard

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

请注意上面 ShowConsumerFiltersRouteGuard 相关的 canActivate() 中的 NOT [!]。因此，在任何时间点都应该只有一个处于活动状态。

以下是我如何在我的 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>

我注意到的是，由于两条子路径都相同，因此它们都被停用并且我的路线被取消。我的要求是，我不能为每个路径设置单独的路径，我想知道如何才能完成这项工作。请有任何建议。

4

0 回答 0