我在我的应用程序中使用命名路由器在其中一个共享模块中实现路由 .
这是AppRoutingModule(root)中的配置:
const routes: Routes = [
{
path: '',
children: [
{
path: 'home',
component: HomeDetailsComponent,
},
{
path: 'call',
component: CallDetailsComponent
},
]
}
];
然后,当用户导航到第一个路径,即'/ home'时,该模块有一个单独的路由模块,具有以下配置:
const curriculumRoutes: Routes = [
{
path: 'home',
component: HomeDetailsComponent,
children: [
{
path: ':id',
component: RoomDetailsComponent,
outlet: 'chapter',
}
]
},
];
对于第一个根配置,我使用主插座来渲染组件,对于第二个配置,我使用命名路由器“章节” . 我从主路由器插座获取的URL如下:
http://localhost:3000/#/home
但进一步命名路由器插座,它是这样的:
http://localhost:3000/#/home/(chapter:2)
如何为指定的路由器插座提供这样的URL:
http://localhost:3000/#/home/chapter/2
2 回答
您可以提供自定义URL序列化程序
https://angular.io/docs/ts/latest/api/router/index/UrlSerializer-class.html
我做了一个解决方案,希望它可以帮助别人 .
UrlSerializer的解决方案覆盖 .
在这个例子中,我们转换为像这样的:
这样最终用户只能看到漂亮的网址:
UrlSerializer的实现: