Question

我是一个具有以下结构的Angular（4）应用程序：

app.module
   bi.module
   auth.module

路由应该是：

/ -> redirect to /home
/home -> use HomeComponent
/auth -> redirect to /auth/login
/auth/login -> use LoginComponent
/auth/register -> use RegisterComponent
any other thing -> use PageComponent

问题是这个路由被分成不同的模块，我也使用延迟加载，所以bi.module只在需要时加载（基本上在用户登录后）。现在，我的auths路由正在工作，如果我键入/ home这也有效，但空/或其他任何路由都不起作用。

这是我的app.module.ts

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home'
  },
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    loadChildren: './bi/bi.module#BiModule'
  }
];

...

imports: [
    ...
    AuthModule,
    RouterModule.forRoot(routes, { enableTracing: true }),
    BiModule
  ],

我的auth.module工作正常，所以不需要它。我的bi.module

const routes: Routes = [
  {
    path: '',
    component: PageComponent,
    canActivate: [AuthGuard],
    resolve: {
      content: PageResolve
    }
  }
];

...

imports: [
    ...
    RouterModule.forChild(routes)
  ],

当我去＆＃39; /＆＃39;时，我的biModule中的通配符路由被激活，我的PageComponent被渲染而不是重定向到/ home。

这是我对路由器的追踪：

Router Event: NavigationStart
NavigationStart(id: 1, url: '/')
NavigationStart {id: 1, url: "/"}
Router Event: RoutesRecognized
RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'**') } )
RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
Router Event: NavigationEnd
NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/')
NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}

PageComponent

最后一个跟踪（PageComponent）是我组件中的console.log。

知道我做错了什么吗？感谢

Answer 1

您在bi.module中定义的路径的路径为""。这将与您的家乡路线发生冲突，该路线的路径也为""。

使用RouterModule.forChild(routes)在bi.module中添加路由时，会将新模块路由预先添加到整个路由对象。当您导航到路径""时，angular会找到与条件匹配的第一条路径，在这种情况下，它将是PageComponent路径。这就是角度路由器的行为方式。

所有路由中的每个路径都必须是唯一的，因此在第二个路径中定义两条路径""而没有模块前缀的路由将导致错误。

https://angular.io/guide/router#lazy-loading-route-configuration

可能无法直接使用延迟加载的路由作为通配符，但如果您在app.module中定义了一个通配符路由，该路由重定向到您需要的bi.module中的路由，则可能会重定向正确。

I.E in app.module。

{
  path: '/bi',
  loadChildren: './bi/bi.module#BiModule'
},
{
  path: '**',
  redirectTo: '/bi'
}

然后在bi.module

{ path: 'bi', 
  children: [ { 
    path: '**', 
    component: PageComponent, 
    canActivate: [AuthGuard]
  }]
}

这意味着bi模块中的所有路由都将附加＆＃39; / bi＆＃39;但这是允许使用两个""路径所必需的。

具有多个模块和动态路由的角度路由

1 个答案: