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

这当然失败了： Route generator for 'group' was not included in parameters passed. 我无法弄清楚如何将一些默认参数传递给第一条路线。我确实通过创建另一条没有参数的路线来进行工作，并将其作为默认值使用：

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

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

Answer 1

所以我通过以下方式解决了我的问题：我添加了一个没有params的默认路由，我立即从$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' }]);
  }
}

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

另见

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

2 个答案: