Question

我正在尝试设置无组件路由以在Angular 5中应用路由防护，如下所示：

const routes: Routes = [
{path: '', runGuardsAndResolvers: 'always', canActivateChild:[AppRouteGuard], children: [
    { path: '', redirectTo: 'main', pathMatch: 'full' },
    { path: 'get-started', redirectTo: 'get-started', pathMatch: 'full'},

]}];

不幸的是，似乎没有调用redirectTo'main'。但是，以下方法确实有效：

    const routes: Routes = [
{path: '', runGuardsAndResolvers: 'always', canActivateChild:[AppRouteGuard], children: [
    { path: '', component: MainComponent, pathMatch: 'full' },
    { path: 'get-started', redirectTo: 'get-started', pathMatch: 'full'},

]}];

是否只有后来的作品有效？有没有办法使redirectTo：'main'正常工作？

Answer 1

无组件的路由“消耗” URL段，而无需实例化组件。这并不意味着没有与路线相关的组件。

在您的情况下，当您尝试重定向到'main'时。此“主”路由没有可用的路由信息，因此失败。您应该在重定向配置后定义主路由，如下所示：

const routes: Routes = [
{path: '', runGuardsAndResolvers: 'always', canActivateChild:[AppRouteGuard], 
children: [
    { path: '', redirectTo: '/main', pathMatch: 'full' },
    { path: 'main', component: MainComponent },

]}];

无组件路由的简单示例：

 [
  {
    path: 'team/:id',
    children: [
      {
        path: '',
        component: TeamListComponent
      },
      {
        path: '',
        component: TeamDetailsComponent,
        outlet: 'aux'
      }
    ]
  }
]

由于没有与/team/:id路由关联的组件，路由器将合并其params，data，并解析为children。结果，TeamListComponent和TeamDetailsComponent可以直接访问id参数，而无需通过父级路由。

带防护的Angular 5无组件路由无法命中重定向

1 个答案: