Angular<路由器出口名称=“弹出">更改 URL 路径结构? [英] Angular <router-outlet name="popup"> change URL path structure?

问题描述

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

I'm using a popup (refering to the docs): https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

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

Everything is fine apart from the URL structure:

/domain/subPath/(popup:myopoup)

/domain/subPath/(popup:myopoup)

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

How can I change this default structure with parenthesis? I would like it to be as follows:

/domain/subPath/popup

/domain/subPath/popup

换句话说，我想删除括号，包括 URL 中的 冒号.

In other words, I want to remove the brackets including the colon inside the URL.

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

Inside their documentation the popup also appears in that manner (with brackets)

这里有一些代码:

.ts

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

.html

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

推荐答案

你可以使用 URL 序列化器，改变 url 结构

you can use URL serializer, to change url structure

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));
}
}

导入该类并将其作为提供者添加到您的模块中

import this class and add it as provider in your module

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

这篇关于Angular<路由器出口名称=“弹出">更改 URL 路径结构?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！