角<路由器出口名称="弹出>>更改URL路径结构? [英] Angular <router-outlet name="popup"> change URL path structure?
问题描述
我正在使用一个弹出窗口(请参阅文档): https://angular.io/guide/router #displaying-multipleroutes-in-named-outlets
I'm using a popup (refering to the docs): https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets
除URL结构外,一切都很好:
Everything is fine apart from the URL structure:
/domain/subPath/(popup:myopoup)
/domain/subPath/(popup:myopoup)
如何用括号更改此默认结构? 我希望它如下:
How can I change this default structure with parenthesis? I would like it to be as follows:
/domain/subPath/popup
/domain/subPath/popup
换句话说,我想删除括号,包括URL内的冒号.
In other words, I want to remove the brackets including the colon inside the URL.
在他们的文档中,弹出窗口也以这种方式显示(带有括号)
Inside their documentation the popup also appears in that manner (with brackets)
这是一些代码:
.ts
{
path: 'mypopup',
component: MyComponent,
outlet: 'popup'
},
.html
<a [routerLink]="[{ outlets: { popup: ['mypopup'] } }]">Contact</a>
<router-outlet name="popup"></router-outlet>
推荐答案
您可以使用URL序列化程序来更改url结构
you can use URL serializer, to change url structure
import { UrlTree ,DefaultUrlSerializer, UrlSerializer } from '@angular/router';
export class cleanUrlSerializer extends DefaultUrlSerializer {
public parse(url: string): UrlTree {
function cleanUrl(url) {
return url.replace(/\(|\)/g,'') // for example to delete parenthesis
}
return super.parse(cleanUrl(url));
}
}
导入此类,并将其添加为模块中的提供者
import this class and add it as provider in your module
providers: [
{
provide: UrlSerializer,
useClass: cleanUrlSerializer
}
]
这篇关于角<路由器出口名称="弹出>>更改URL路径结构?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!