Angular <router-outlet name="popup"> 更改 URL 路径结构?
Angular <router-outlet name="popup"> change URL path structure?
我正在使用弹出窗口(参考文档):
https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets
除了 URL 结构之外,一切都很好:
/domain/subPath/(popup:myopoup)
如何更改带括号的默认结构?
我希望它是这样的:
/domain/subPath/popup
换句话说,我想去掉括号,包括URL里面的冒号。
在他们的文档中,弹出窗口也以这种方式出现(带括号)
这是一些代码:
.ts
{
path: 'mypopup',
component: MyComponent,
outlet: 'popup'
},
.html
<a [routerLink]="[{ outlets: { popup: ['mypopup'] } }]">Contact</a>
<router-outlet name="popup"></router-outlet>
您可以使用 URL 序列化程序来更改 url 结构
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));
}
}
导入此 class 并将其作为提供程序添加到您的模块中
providers: [
{
provide: UrlSerializer,
useClass: cleanUrlSerializer
}
]
这就是 Angular 处理多个出口的方式。我认为您不会为此找到 "clean" 解决方案。那么就不要使用名称路由器插座。有一个没有名字的路由器插座。
[routerLink]="['popup']">
{
path: 'mypopup',
component: MyComponent
},
<router-outlet name="popup"></router-outlet>
不幸的是,您的项目中似乎确实有多个路由器,所以这可能不是解决方案。当其他评论者说目前没有简单干净的方法时,我会支持他们。我也想要一个不同的路由解决方案,所以希望我们能抱怨得够多,他们会找到新的方法。
我正在使用弹出窗口(参考文档): https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets
除了 URL 结构之外,一切都很好:
/domain/subPath/(popup:myopoup)
如何更改带括号的默认结构? 我希望它是这样的:
/domain/subPath/popup
换句话说,我想去掉括号,包括URL里面的冒号。
在他们的文档中,弹出窗口也以这种方式出现(带括号)
这是一些代码:
.ts
{
path: 'mypopup',
component: MyComponent,
outlet: 'popup'
},
.html
<a [routerLink]="[{ outlets: { popup: ['mypopup'] } }]">Contact</a>
<router-outlet name="popup"></router-outlet>
您可以使用 URL 序列化程序来更改 url 结构
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));
}
}
导入此 class 并将其作为提供程序添加到您的模块中
providers: [
{
provide: UrlSerializer,
useClass: cleanUrlSerializer
}
]
这就是 Angular 处理多个出口的方式。我认为您不会为此找到 "clean" 解决方案。那么就不要使用名称路由器插座。有一个没有名字的路由器插座。
[routerLink]="['popup']">
{
path: 'mypopup',
component: MyComponent
},
<router-outlet name="popup"></router-outlet>
不幸的是,您的项目中似乎确实有多个路由器,所以这可能不是解决方案。当其他评论者说目前没有简单干净的方法时,我会支持他们。我也想要一个不同的路由解决方案,所以希望我们能抱怨得够多,他们会找到新的方法。