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

Question

我在Angular中重写了一个AngularJS 1.5应用程序 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 中没有出现任何问题，但是 Angular 5 router 错误 ERROR Error: Cannot parse url '/... 并且应用程序失败并显示空白内容 - 它不会重定向到任何地方。

未编码的URL参数已经是'in the wild'所以我需要处理无法解析URL的场景。不幸的是 the documentation 似乎没有提供任何方法来处理 URL 解析中的错误。

编辑：向应用程序提供 errorHandler in the config object for RouterModule.forRoot doesn't catch the error. Adding a global ErrorHandler class 没有帮助，因为错误对象不会告诉我它是否是路由错误或其他类型的错误。

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

Answer 1

您可以使用 UrlSerializer 来更改 url 行为，这里是从 urls

中删除括号的示例

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

导入此 class 并将其作为提供程序添加到您的模块中

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

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

Handle URL parse errors in Angular 5 router

url

angular-routing

angular

angular-router