Angular 未解析编码查询参数的路由

Question

In my Angular 10 application I have a route like this

http://localhost:4200/employee/enrollments?number=189930097&city=Chicago

Sometimes the URL is being encoded as

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

and router fails to find a match. Is there a way to fix this decoding issue and make it resolve always?

Update: I added my footer component in which I am using routerLink that updates the current URL

EmployeeRoutingModule :

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


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

}

FooterComponent

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

Footer Component HTML:

<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>

Answer 1

Would it not make more sense to use a route parameter than a query string?

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

and then route to http://localhost:4200/employee/enrollments/189930097

and in your component you can use the ActivatedRoute service to get the param.

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

Answer 2

Have you tried to use something like custom serializer?

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

and then in App module

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