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 工作正常，所以不需要它。我的 bi.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 在 app.module.

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

然后在 bi.module

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

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

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

angular routing with multiple modules and dynamic routes

angular-routing

angular