Question

当前，当我们使用查询参数路由到Angular 6中的任何路由时喜欢 this.router.navigate(['studentInformation'], {queryParams: {filter: '12345'}});

我能够路由，URL变为 http://localhost:4200/#/studentInformation?filter=12345

但是当我们在相同的URL上重新加载页面时，出现错误

错误：无法匹配任何路由。 URL段：“ studentInformation％3Ffilter％3D12345”

我试图通过实现CustomUrlSerializer来删除URl中的字符编码


    parse(url: string): UrlTree {
        // Change plus signs to encoded spaces
        url.replace("%3F", '?');
        // Use the default serializer that you can import to just do the 
        // default parsing now that you have fixed the url.
        return url  
    }

    serialize(tree: UrlTree): string {
        // Use the default serializer to create a url and replace any spaces with + signs
        return super.serialize(tree).replace("%3F", '?');
    }
} 

after implementing this encoded character got removed from URL on reload but still getting error from the angular router

> Error: Cannot match any routes. URL Segment: 'studentInformation%3Ffilter%3D12345'

I think angular router is trying to match full url including the query params and hence it is failing.
Ideally Angular router should ignore the query params while matching for the routes on reload.
Is this a bug in Angular? Any workaround for this?

Angular 6中具有查询参数的路由无法在页面重新加载上使用

0 个答案: