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

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 工作正常，所以不需要它。我的双模块

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

...

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

当我进入 '/' 时，我在 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 路由。这就是 Angular 路由器的行为方式。

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

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

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

应用程序模块中的 I.E。

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

然后在 bi.module 中

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

这确实意味着 bi 模块中的所有路由都将附加 '/bi'，但这是允许使用两个 "" 路径所必需的。