Angular <router-outlet name="popup"> 更改 URL 路径结构？答案

【问题标题】：Angular <router-outlet name="popup"> change URL path structure?Angular <router-outlet name="popup"> 更改 URL 路径结构？
【发布时间】：2018-03-27 14:08:06
【问题描述】：

我正在使用弹出窗口（参考文档）： https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

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

/domain/subPath/(popup:myopoup)

如何更改带有括号的默认结构？我希望它是这样的：

/domain/subPath/popup

换句话说，我想删除括号，包括网址中的冒号。

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

这是一些代码：

.ts

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

.html

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

【问题讨论】：

我认为你做不到。你需要有一种方法来定义你的多个 URL，如果你去掉括号，它只是一个没有任何辅助路由的常规 URL。
您的组件上是否有多个路由器插座？如果没有，那么你不需要命名它
@Ricardo，是的，我是，这就是为什么我必须命名这个...
就像@Maxime 所说，我认为不可能以一种干净的方式来改变你的 url 的结构并仍然使用 router-outlet 功能，这就是 Angular 团队实现它的方式。我会环顾四周看看是否找到解决方案
@Ricardo，tnx 我很感激。我不知道为什么 Angular 团队会这样做，别无选择……这很不寻常

标签： angular url angular-ui-router popup

【解决方案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 
    }
  ]

【讨论】：

【解决方案2】：

这就是 Angular 处理多个出口的方式。我认为您不会为此找到“干净”的解决方案。那就不要使用名称路由器插座。拥有一个没有名称的路由器插座。

[routerLink]="['popup']">

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

<router-outlet name="popup"></router-outlet>

不幸的是，您的项目中似乎确实有多个路由器，所以这可能不是一个解决方案。当其他评论者说目前没有一种简单的清洁方法时，我会支持他们。我还想要一个不同的路由解决方案，所以希望我们可以抱怨到足以让他们找到新的方法。

【讨论】：