Angular 角度5路线-特殊字符不在自定义路线中工作

当我尝试访问URL类型时：

我得到一个404错误

但是当这个url通过ng serve通过localhost进行测试时，它是否有效

当我试图删除由浏览器%2编码的字符时 url是否有效

如何让angular接受这些参数

const appRoutes: Routes = [
//this route
  { path: 'recovery-password/:token', component: RecoveryPasswordComponent, pathMatch: 'full', runGuardsAndResolvers: 'always', canActivate: [AnonymousGuard]},
  { path: 'main', component: MainComponent, pathMatch: 'full', runGuardsAndResolvers: 'always', canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', redirectTo: '/login' },
];

export const routing = RouterModule.forRoot(appRoutes, { onSameUrlNavigation: 'reload' });

---

您可以覆盖Angular的DefaultUrlSerializer

我已经创建了一个演示点击登录菜单，并看到网址

UrlSerializerService

app.module.ts

import { Injectable } from '@angular/core';
import {DefaultUrlSerializer, RouterModule, Routes, UrlSegment, UrlSerializer, UrlTree} from '@angular/router';
@Injectable()
export class UrlSerializerService {


  private defaultSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

  parse(url: string): UrlTree {

    // This is the custom patch where you'll collect segment containing '='
    const lastSlashIndex = url.lastIndexOf('/'), equalSignIndex = url.indexOf('=', lastSlashIndex);
    if (equalSignIndex > -1) { // url contians '=', apply patch
      const keyValArr = url.substr(lastSlashIndex + 1).split('=');
      const urlTree = this.defaultSerializer.parse(url);

      // Once you have serialized urlTree, you have two options to capture '=' part
      // Method 1. replace desired segment with whole "key=val" as segment
      urlTree.root.children['primary'].segments.forEach((segment: UrlSegment) => {
        if (segment.path === keyValArr[0]) {
          segment.path = keyValArr.join('='); // Suggestion: you can use other unique set of characters here too e.g. '$$$'
        }
      });

      return urlTree;
    } else {
      return this.defaultSerializer.parse(url);
    }
  }

  serialize(tree: UrlTree): string {
    return this.defaultSerializer.serialize(tree);
  }

}

import { UrlSerializerService } from './url-serializer.service';
import {UrlSegment, UrlSerializer} from '@angular/router';

@NgModule({
  providers: [
    {
      provide: UrlSerializer,
      useClass: CustomUrlSerializer
    }
  ],