Question

我正在使用弹出窗口（参考文档）： documentation

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

/域/子路径/（弹出：myopoup）

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

/域/子路径/弹出

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

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

以下是一些代码：

.TS

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

html的

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

Answer 1

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

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

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

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

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

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

Angular <router-outlet name =“popup”>更改URL路径结构？

2 个答案: