Angular 角度路由器-延迟加载而不丢失url段
据我所知,角度路由器延迟加载是从url段开始工作的 例如,在中,您将危机中心放在一个单独的模块中,其组件的路径挂起“www.server.org/crisis center/” 但是,如果您想拥有Angular 角度路由器-延迟加载而不丢失url段,angular,angular2-routing,Angular,Angular2 Routing,据我所知,角度路由器延迟加载是从url段开始工作的 例如,在中,您将危机中心放在一个单独的模块中,其组件的路径挂起“www.server.org/crisis center/” 但是,如果您想拥有危机中心组件而不挂在“www.server.org/crisis center”url段上,该怎么办 例如,“www.server.org/crisis center”指向CrisisListComponent,“www.server.org/crisis admin”指向CrisisAdminComp
危机中心组件而不挂在“www.server.org/crisis center”url段上,该怎么办
例如,“www.server.org/crisis center”指向CrisisListComponent,“www.server.org/crisis admin”指向CrisisAdminComponent
我找不到方法将这两条路由指向同一个延迟加载的模块
有人知道如何在不丢失url的情况下使用延迟加载
其他例子:
让我们看看这个问题:
解决方案是创建一条惰性路由:
{ path: 'Lazy', loadChildren: './+lazy/lazy.module#LazyModule' }
然后您可以使用www.asdf.com/Lazy/Page30
和www.asdf.com/Lazy/Page31
,url的第一段(Lazy
)将丢失
是否有一些方法可以使用www.asdf.com/Page30
和www.asdf.com/Page31
使用相同的惰性模块进行惰性加载???我知道有3种可能的解决方案(变通方法):
使用单独的路由将懒惰模块分成两个懒惰模块-不同的URL通常意味着这些组件做不同的事情,并且应该在它们自己的模块中
在这些组件之前添加一个前缀-而不是url/crisis admin和url/crisis user,您可以执行url/crisis/admin和url/crisis/user。(或者url/crisis/crisis admin,如果您觉得更好的话)
Route/to模块,这样您就可以在那里声明进一步的路由(您可能不想这样做)
在带有页面的示例中,应按如下方式将其分开:
url/page //base url
----url/page/30
----url/page/31
或者更好:
url/page?number=30
url/page?number=31
并将这些页面放入单个组件中(如果这对您是可行的)您可以使用如下路由器配置:
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});
在您的子路由器配置中(必须由您的危机中心
模块导入):
这只是一个漫长的尝试,我还没有尝试过。我也在尝试同样的事情,我已经找到了解决办法
在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}
];
同样,配置文件和编辑的工作方式如下:
本地主机:8080/profile和
本地主机:8080/编辑
要检查模块是否确实是延迟加载,请在模块的构造函数中放入一些console.log()
希望这有帮助,谢谢你说的“挂起”是什么意思?“在里面”,“挂起”不,这与“危机中心/危机中心”,“危机中心/危机管理”,“危机管理/危机管理”和“危机管理/危机中心”匹配感谢概念证明,似乎最好有一个通用模块,CrisCenter在本例中创建两个模块,一个用于管理员,另一个用于访问者,只需导入通用模块并使用所需的组件和服务即可。是的,但没有XD。在大型应用程序中,每个模块可能有多条路由。例如:仓库模块->发票、送货单、供应商、销售。。。CustomerModule->客户、公司、地址、评论。。。街道面板模块:国家、地区、城镇、邮政编码、街道。。。我希望有应用程序/供应商、应用程序/街道、应用程序/发票等路线。。。但是这个路由器强迫你拥有app/wh/invoice,app/cus/addresses,app/steetplan/contry。。。我越来越讨厌路由器了……是的,我知道那种痛苦。我必须承认,我也不喜欢它。但最好为该模块找到一个别致的名称,而不是等待在单个模块中下载8mb的应用程序。让我们看看angular团队将如何处理延迟加载和路由路径。是的,我知道,需要延迟加载。我是测试阶段的angular 2,我知道路由器2.0,你知道吗?我喜欢2.0胜过3.0。我不知道更改它的原因,可能是因为它是由Rob Eisemberg编写的,它将用于Aurelia项目。。。
const routes: Routes = [
{ path: 'profile', component: ProfileComponent },
{ path: 'edit', component: EditProfileComponent}
];