在Angular中导航时如何处理URL中的括号

Question

当我们尝试使用名称路由来跟踪url时，会出现导航错误
Angular试图找到一个命名的路由器，但它不存在
在其他情况下，一切正常，我们转到404页
是否可以以某种方式禁用此行为并转到404页面？

错误演示：stackblitz

获取错误的步骤：

• 在stackblitz 中打开控制台

• 点击名为">"的红色链接；获取url错误">

• 将出现错误：

  错误错误：未捕获(承诺中(：错误：无法匹配任何路由。URL段："2"错误：无法匹配任何路由。URL段："2">

Answer 1

使用序列化是一种非常好的方法，谢谢大家！

UrlSerializer-https://angular.io/api/router/UrlSerializer
DefaultUrlSerializer-https://angular.io/api/router/DefaultUrlSerializer

import { Injectable } from '@angular/core';
import { DefaultUrlSerializer, UrlTree } from '@angular/router';
@Injectable()
export class CustomUrlSerializerService extends DefaultUrlSerializer {
constructor() {
super();
}
public parse(url: string): UrlTree {
const urlSplit = url.split('?');
const queryParams = urlSplit[1];
let newUrl = this.replacer(decodeURI(urlSplit[0]));
if (queryParams) {
newUrl += `?${decodeURI(queryParams)}`;
}
return super.parse(newUrl);
}
public serialize(tree: UrlTree): string {
return super.serialize(tree);
}
private replacer(str: string): string {
return str.replace(/[()]/g, (c) => '%' + c.charCodeAt(0).toString(16));
}
}

App.module.ts

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

Answer 2

改为使用router.navigation((；

示例用例：

this._router.navigate(['/about(2)']);