处理 Angular 5 路由器中的 URL 解析错误

Question

我正在用 Angular 5 重写一个 AngularJS 1.5 应用程序。该应用程序支持复杂搜索，其中影响搜索结果的所有参数都包含在 URL/路由路径中。用户可以为搜索 URL 添加书签以重新应用相同的搜索条件。

1.5 app的ui-router配置用/分隔路由路径参数，其中几个参数是对象，所以配置的格式是/{parameter1:json}/:parameter2/{parameter3:json}/。 Angular 5 不支持这种相同的方法。对于格式为/:parameters 的所有参数，我必须使用单个 JSON 编码对象。

我正在实现一个旧支持路由，该路由可识别用户何时尝试访问旧 (1.5) 搜索 URL，并将用户定向到应用了相同参数的新 (5) URL。在大多数情况下，这都可以正常工作。

但是，旧版应用程序没有正确地对其某些参数进行 URL 编码。这在 1.5 ui-router 中没有出现任何问题，但是 ERROR Error: Cannot parse url '/... 的 Angular 5 路由器错误并且应用程序失败并显示空白内容 - 它不会重定向到任何地方。

未编码的 URL 参数已经存在，因此我需要处理无法解析 URL 的情况。不幸的是，the documentation 似乎没有提供任何方法来处理 URL 解析中的错误。

编辑：在RouterModule.forRoot 的配置对象中提供errorHandler 不会捕获错误。将全局 ErrorHandler 类添加到应用程序没有帮助，因为错误对象不会告诉我这是路由错误还是其他类型的错误。

有什么方法可以捕获 URL 解析错误，或为错误场景提供回退行为？

Answer 1

你可以使用 UrlSerializer 来改变 url 的行为，这里是一个从 url 中删除括号的例子

 import { UrlTree ,DefaultUrlSerializer, UrlSerializer } from '@angular/router';

export class cleanUrlSerializer extends DefaultUrlSerializer {  
public parse(url: string): UrlTree {
 function cleanUrl(url) {
    return url.replace(/\(|\)/g,'') // for example to delete parenthesis
 }
 return super.parse(cleanUrl(url));
}
}

导入该类并将其作为提供者添加到您的模块中

providers: [
{
    provide: UrlSerializer,
    useClass: cleanUrlSerializer 
}
]