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

Question

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

除了URL结构之外,一切都很好:

/域/子路径/(弹出:myopoup)

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

/域/子路径/弹出

换句话说,我想删除 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 
    }
  ]