如何在角组件路由器中使用参数定义默认路由？

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'}
]

这当然会失败：“组”的路由生成器未包含在传递的参数中。我无法弄清楚如何将一些默认参数传递给第一个路由。我确实通过创建另一个没有参数的路由并将其用作默认值来启动它：

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

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

Answer 1

据我所知，这是不支持的。您可以有一个带参数和不带参数的路由，然后在 GroupDefault 组件中，只需导航到“组”

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

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

另请参见

• 路由angular2时的可选参数
• 角度2可选路线参数

Answer 2

所以我用下面的方法解决了我的问题:我添加了一个没有参数的默认路由，并立即从< code>$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' }]);
  }
}