带有查询参数的角度路由模块答案

【问题标题】：Angular routing module with query params带有查询参数的角度路由模块
【发布时间】：2019-09-11 07:35:53
【问题描述】：

大家好我在路由模块中有一些这样的路由

  {
    path: 'contracts',
    component: ContractsComponent,
    canActivate: [ContractsGuardService],
    children: [
      {
        path: '',
        component: ContractsSearchComponent,
        canActivate: [ContractsGuardService]
      },
      {
        path: 'contract/:details',
        component: ContractDetailsComponent,
        canActivate: [DetailsGuardService],
        resolve: { contractDetails: DetailsResolver }
      }
    ]
  }

我遇到的问题是，在合同路线中，我总是必须有这样的 ?activeOnly=false 在 url 参数中，当有人输入这样的 url /contracts 我必须将他重定向到 /contracts?activeOnly=false 这是我必须在路由模块中完成的事情吗？

【问题讨论】：

标签： angular routing angular-ui-router

【解决方案1】：

您可以从子路由中删除 canActivate: [ContractsGuardService]。在父母身上应该足够了。
我假设查询参数改变了 ContractsSearchComponent 的默认过滤。我猜你想在没有查询参数时同时显示非活动和活动。那么查询参数就有意义了。但是如果你像你写的那样：总是需要添加参数，那么也许你应该让 ContractsSearchComponent 只显示无效的实体。然后添加查询参数，您可以在其中设置“两者”或“活动”。

第三种选择是添加更多子路由：

{
    path: 'contracts',
    component: ContractsComponent,
    canActivate: [ContractsGuardService],
    children: [..]
},
{
   path:'contracts-inactive'
   redirectTo:'contracts?activeOnly=false'
},
{
   path:'contracts-active'
   redirectTo:'contracts?activeOnly=true'
}

【讨论】：

代码不起作用，我不想添加另一个路由，我只需要在 /contract 路由中添加 activeOnly=false。 1. 是不是和问题无关，还是我错了？
但是如果你有一个像“contracts”这样的路由，显示一个包含所有合约的列表，那么使用查询参数进行过滤是完美的。我对更改 ContractsComponent 中的默认过滤的建议怎么样？如果您总是需要设置？activeOnly=false，则将默认设置为仅显示非活动状态。你可以在 ContractsComponent 中做到这一点

【解决方案2】：

您是否尝试将redirectTo 属性设置为路由？

{
path: 'contracts',
component: ContractsComponent,
canActivate: [ContractsGuardService],
redirectTo: 'contracts?activeOnly=false',
children: [
  {
    path: '',
    component: ContractsSearchComponent,
    canActivate: [ContractsGuardService]
  },
  {
    path: 'contract/:details',
    component: ContractDetailsComponent,
    canActivate: [DetailsGuardService],
    resolve: { contractDetails: DetailsResolver }
  }
]

}

【讨论】：

main.ts:12 错误：路由“选项卡/合同”的配置无效：redirectTo 和子级不能一起使用