Question

根据父路径/搜索，想要解析[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'
  }
]

由于我需要使用两个子出口，我将路径设置为

路径：＆＃39;＆＃39;

这样两者都默认被选中。但是，根据我的警卫中设定的条件，我只希望其中一个出口处于活动状态。

Guards [de]激活如下

ShowProviderFiltersRouteGuard

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

ShowConsumerFiltersRouteGuard

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

请注意上面的[！]与ShowConsumerFiltersRouteGuard相关的canActivate（）。因此，任何时候只有一个应该是活跃的。

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

我注意到，由于两个子路径相同，两个都被停用，我的路线被取消。我的要求是，我不能为每个人提供单独的路径，我想知道如何才能使这项工作成功。任何建议请。

如何在Angular 4中有条件地[de]激活具有相同路径的子路由？

0 个答案: