1

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

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

有时 URL 被编码为

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

并且路由器找不到匹配项。有没有办法解决这个解码问题并让它总是解决？

更新： 我添加了我正在使用 routerLink 更新当前 URL 的页脚组件

员工路由模块：

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


@NgModule(
    {
        imports: [
            RouterModule.forChild(enrollmentManagementRoutes)
        ],
        exports: [
            RouterModule
        ]
    })
export class 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);
    }
}

页脚组件 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>
4

2 回答 2

2

使用路由参数比使用查询字符串更有意义吗？

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

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

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

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

于 2020-08-12T22:47:54.110 回答
1

您是否尝试过使用自定义序列化程序之类的东西？

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}
  ],
...
于 2020-08-13T16:55:25.513 回答