具有解析查询参数的Angular Route无法解析

问题描述

在Angular 10应用程序中，我有一条这样的路线

http://localhost:4200/employee/enrollments%3Fnumber%3D189930097%26city=Chicago

有时URL被编码为

export const enrollmentManagementRoutes: Routes = [
    {
        path: 'enrollments',component: EnrollmentSearchComponent,canActivate: [EmployeeAuthGuardService],}
];


@NgModule(
    {
        imports: [
            RouterModule.forChild(enrollmentManagementRoutes)
        ],exports: [
            RouterModule
        ]
    })
export class EmployeeRoutingModule
{

}

，并且路由器找不到匹配项。有没有办法解决此解码问题并使其始终解决？

更新： 我添加了页脚组件，其中正在使用routerLink来更新当前URL

EmployeeRoutingModule ：

import {Component,OnInit} from '@angular/core';
import {NavigationEnd,Router} from '@angular/router';
import {environment} from '../../../environments/environment';

@Component({
    selector: 'app-footer',templateUrl: './footer.component.html',styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit
{
    appVersion: any;
    currentUrl='/';

    constructor(private router: Router)
    {
    }

    ngOnInit()
    {
        this.appVersion = environment.VERSION;

        //Update Need Assistance link URL,this prevents default URL being '/'
        this.router.events.subscribe(data=>
        {
            if(data instanceof NavigationEnd)
            {
                this.currentUrl=data.url+'';
            }
        });
    }

    navigateByUrl()
    {
        this.router.navigateByUrl(this.currentUrl);
    }
}

FooterComponent

<a class=" col-sm-12 col-xs-12 col-md-auto request-help-link" id="request-help-link" rel="noopener noreferrer"
               [routerLink]="currentUrl"  style="font-size: 20px" >
                Need Assistance? Click here
            </a>

页脚HTML：

p{
   /* your current style */
   margin:auto;
}

解决方法

使用route参数比查询字符串有意义吗？

export const enrollmentManagementRoutes: Routes = [
    {
        path: 'enrollments:number',component: EnrollmentSearchComponent,canActivate: [EmployeeAuthGuardService],}
];

，然后路由到http://localhost:4200/employee/enrollments/189930097

在组件中，您可以使用ActivatedRoute服务获取参数。

https://angular.io/api/router/ActivatedRoute

,

您是否尝试过使用自定义序列化程序？

serializer.ts

export class CustomUrlSerializer implements UrlSerializer {
  parse(url: any): UrlTree {
    const dus = new DefaultUrlSerializer();
    return dus.parse(url);
  }

  serialize(tree: UrlTree): any {
    const dus = new DefaultUrlSerializer();
    const path = dus.serialize(tree);
    // use your regex to replace as per your requirement.
    path.replace(/%3F/g,'?');
    path.replace(/%3D/g,'=');
    return path;
  }
}

然后在App模块中

...
providers: [
    {provide: UrlSerializer,useClass: CustomUrlSerializer}
  ],...