Question

据我所知，角度路由器延迟加载来自url段。

例如在live example of docs中，你有一个危机中心在一个单独的模块中，来自他的组件的路由挂起'www.server.org/crisis-center/'...

但是如果你想要crisis-center组件而不挂在'www.server.org/crisis-center'URl段上呢？

例如'www.server.org/crisis-center'指向CrisisListComponent，'www.server.org/crisis-admin'指向CrisisAdminComponent

我找不到将两条路线指向同一个延迟加载模块的方法......

有人知道如何使用延迟加载而不丢失网址吗？

其他例子：

让我们看看这个问题：Multiple Components from Same Lazy Route Not Working

解决方案是制定一条懒惰的路线：

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

然后你可以使用www.asdf.com/Lazy/Page30和www.asdf.com/Lazy/Page31，网址的第一段（lazy）丢失了......

是否有某种方法可以使用延迟加载www.asdf.com/Page30和www.asdf.com/Page31使用相同的延迟模块？

Answer 1

我知道有3种可能的解决方案（解决方法）：

将懒惰模块分成两个具有单独路由的惰性模块 - 不同的网址通常意味着这些组件分开，并且应该在自己的模块中
在这些组件之前添加前缀 - 而不是url / crisis-admin和url / crisis-user，您可以执行url / crisis / admin和url / crisis / user。（或url / crisis / crisis-admin，如果你看起来更好）
路由/到模块，所以你可以在那里声明进一步的路由（你可能不想这样做）。

在包含页面的示例中，您应该将其分开：

url/page //base url
----url/page/30
----url/page/31

甚至更好：

url/page?number=30
url/page?number=31

将这些页面组合成单个组件（如果这对你来说可行）

Answer 2

我正在尝试同样的事情，我找到了解决方案。

在app.module路由中，您可以执行类似

的操作

{
path: '',
component: UserLayoutComponent,
children: [
  {path: '', component: HomeComponent},
  {
    path: '',
    loadChildren:'app/user/user/user.module#UserModule'
  }
]
}

现在UserModule是延迟加载的

并且在用户模块路由中可以像这样

const routes: Routes = [
{ path: 'profile', component: ProfileComponent },
{ path: 'edit', component: EditProfileComponent} 
];

同样，个人资料和编辑工作方式如下： localhost：8080 / profile和本地主机：8080 /编辑

要检查模块是否实际是延迟加载，请将一些console.log（）放在模块的构造函数中。

希望这有帮助，谢谢

Answer 3

您可以拥有类似这样的路由器配置：

const routes: any = [{
    path: "crisis-center",
    loadChildren: "crisis.module#CrisisModule"
}, 
{ 
    path: "crisis-admin", 
    loadChildren: "crisis.module#CrisisModule"
}];
export const appRoutes: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: false});

在您的子路由器配置中（必须由crisis-center模块导入）：

const routes: Routes = [{
    path: "crisis-center",
    component: CrisisListComponent,
    pathMatch: "full"
},{
    path: "crisis-admin",
    component: CrisisAdminComponent,
    pathMatch: "full"
}];

export const childRoutes: ModuleWithProviders = RouterModule.forChild(routes);

这只是一个长镜头，我还没试过。

角度路由器 - 延迟加载而不丢失网址段

其他例子：

3 个答案: