角度<路由器插座名称= "popup" >更改 URL 路径结构？

Question

我正在使用弹出窗口(引用文档(： https://angular.io/guide/Router#displaying-multiple-routes-in-named outlets

除了URL结构外，一切都很好：

/domain/subpath/(弹出：Myopoup(

如何通过括号更改此默认结构？我希望它如下：

/domain/subpath/popup

换句话说，我想删除括号包括 colon 在URL中。

在他们的文档中，弹出窗口也以这种方式出现(带有括号(

这是一些代码：

.ts

{
  path: 'mypopup',
  component: MyComponent,
  outlet: 'popup'
},

.html

<a [routerLink]="[{ outlets: { popup: ['mypopup'] } }]">Contact</a>
<router-outlet name="popup"></router-outlet>

Answer 1

您可以使用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));
}
}

导入此类并将其添加为模块中的提供商

 providers: [
    {
        provide: UrlSerializer,
        useClass: cleanUrlSerializer 
    }
  ]

Answer 2

这就是角度处理多个插座的方式。我认为您不会为此找到"干净"解决方案。然后不要使用名称路由器插座。有一个没有名字的路由器插座。

[routerLink]="['popup']">
{
  path: 'mypopup',
  component: MyComponent
},
<router-outlet name="popup"></router-outlet>

不幸的是，您的项目中似乎确实有多个路由器，因此这可能不是解决方案。当其他评论者说目前没有简单的干净方法时，我将备份其他评论者。我也想要一个不同的路由解决方案，因此希望我们能抱怨他们找到一种新的方式。