时间戳

首页 > 解决方案 > 延迟加载角度模块但不使用路由前缀

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

问题描述

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

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

该lazy模块中包含以下路由：

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

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

这可能吗？我一直无法找到解决方案。

标签： javascriptangulartypescript

解决方案

延迟加载模块中组件的 url 是模块 eb 'lazy'-> LazyLoadedModule 的 url 加上该模块中的相对路径的组合，例如 'faq->FaqComponent。

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

您可以做的是在路由配置中添加重定向：

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

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

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

path:'',
loadChildren: ...

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

推荐阅读