javascript - 延迟加载 Angular 模块但不使用路由前缀

Question

我有一个应用程序，我在其中延迟加载一个名为 lazy 的模块。该模块通过以下方式延迟加载:

{
  path:'lazy',
  loadChildren: 
  './lazy/lazy.module#LazyModule'
}

lazy 模块中有以下路由:

const routes = [
 {
   path: '',
   component: LazyComponent
 },
 {
   path: 'faq',
   component: FaqComponent
 },
 {
   path: 'details',
   component: DetailsComponent
 },
]

以上工作正常，但我只能通过 /lazy/faq 或 /lazy/details 访问延迟加载模块的路由。但我真正想要的是不使用路由前缀 lazy 并直接通过 /faq 和 /details 访问我的延迟加载模块的路由.

这可能吗？我还没有找到解决方案。

Answer 1

惰性加载模块中组件的 url 是模块 e.b 'lazy'-> LazyLoadedModule 的 url 加上该模块内的相对路径的组合，例如 'faq->FaqComponent。

所以 url 是 path/to/lazy-module + 'relative/path'。在你的情况下 lazy/faq。您不能省略前缀。

你可以做的是在你的路由配置中添加一个重定向:

path: 'faq',
pathMatch: 'full,
redirectTo: 'lazy/faq'

当你在惰性模块中使用路由时，你可以使用相对路由:this.router.navigate(['faq']) 但浏览器中的 url 将是 lazy/faq 虽然。

另一种选择是使用空路由来加载你的模块:

path:'',
loadChildren: ...

但这会在您的应用程序启动时立即加载您的模块。