如何在Angular组件路由中定义带参数的默认路由？

Question

我希望在我的子组件中有一个默认路由（使用useAsDefault:true设置），并自动传递参数。我无法在文档中找到如何实现它的任何地方。 我有一个具有以下路由的父组件：

$routeConfig = [
    { path: '/employees/...', component: 'employeesComponent', name: 'Employees'}
]

以及一个包含以下内容的子组件：

$routeConfig = [
    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group', useAsDefault: true}
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'}
]

当然，这会失败并提示：参数中未包含'group'的路由生成器。我无法想出如何在第一个路由中传递一些默认参数。不过，我通过创建另一个没有参数的路由，并将其用作默认值来解决了这个问题：

{ path: '/all', component: 'employeeListComponent', name: 'All', useAsDefault: true}

但是，这当然不是理想的。到目前为止，我还没有想出更好的方法，只能使用没有参数的路由，然后立即重定向到一些默认参数。难道没有更好的方法吗？

- Tomas Holas

---

我刚刚发现我想要的是一个可选路由参数，并且有一个开放问题：https://github.com/angular/angular/issues/3525 - Tomas Holas

Answer 1

所以我是这样解决我的问题的：我添加了一个不带参数的默认路由，并且在 $routerOnActivate 中立即进行重定向。

public $routeConfig = [
    { path: '/', component: 'employeeListComponent', name: 'GroupRedirect', useAsDefault: true},    
    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group'}
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'},
]

然后在控制器中：

public $routerOnReuse(route) {
  if (!route.params.group) {
    this.$router.navigate(['Group', { group: 'status', filter: 'active' }]);
  }
}

- Tomas Holas

Answer 2

据我所知，不支持这个功能。您可以创建一个带参数和不带参数的路由，在 GroupDefault 组件中导航至 Group。

$routeConfig = [
    { path: '/group', component: 'employeeListComponentDefault', name: 'GroupDefault', useAsDefault: true}

    { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group'},
    { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'}
]

另请参阅

• Angular2中的可选参数路由
• Angular 2可选路由参数

- Günter Zöchbauer

---

我想你想说的是 '/group'，否则还有一个参数需要修复。 - Tomas Holas

对，我忘了这两个部分都是参数。 - Günter Zöchbauer

啊，所以惯用法是使用可选参数。使用一些默认值来定义一个可以重定向到 '/ :group / :filter' 的路由。虽然并不特别丑陋或性能不佳，但我还是希望有更优雅的解决方案。 - Tomas Holas

路由器目前正在重新设计，当基本架构确定后，我相信他们最终会添加这样的功能，但目前我认为他们首先关注更实质性的功能（这些功能不太容易解决）。 - Günter Zöchbauer