Escaping of URLs in Angular4 routerLink

Question

With Angular4 I can use the following syntax to link to a component:

<a routerLink="MYLINK">link</a>

However the syntax of MYLINK is unclear to me. Is it a path according to RFC 3986, i.e. does it have to follow URL escaping rules? Or is it a concatenation of unescaped path segments?

For example, would I write

<a routerLink="/root/my%20page">link</a>

or

<a routerLink="/root/my page">link</a>

Is this documented anywhere in Angular?

My expectation would be that when passing a path, the path would have to be URL encoded. When passing an array of segments, the segments would not be URL encoded.

Possibly it can be solved by [angular 2 disable url encoding](https://stackoverflow.com/a/41995695/2435473) — Pankaj Parkar, Sep 16 '17 at 16:11
The article seems to relate to query parameters, whereas in the question above I am interested in the path itself. — Carsten, Sep 16 '17 at 18:43
I don't think so that answer is specific to queyparameter.. please give a try with.. — Pankaj Parkar, Sep 16 '17 at 19:12
Sorry for being slow, but I don't understand how this relates to the question or what I would try out. I would basically like to understand what syntax the 'routerLink' directive uses, without reconfiguring this logic. — Carsten, Sep 16 '17 at 19:37
End of the day `routerLink` directive uses `this.router.navigateByUrl` function. So you have to change router Serialization by linked answer. IMO you should try that. — Pankaj Parkar, Sep 17 '17 at 07:07
It turns out that the router link is NOT using the URL encoder mentioned in the link. It splits the path into segments but does not apply any decoding on the segments. This is different from how a URL is parsed, in this case the segments are decoded. To me this looks like an inconsistent behaviour. — Carsten, Sep 18 '17 at 13:07

score -1 · Answer 1 · answered Aug 09 '19 at 11:58

Crea un archivo CustomUrlSerializer.ts

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

export class CustomUrlSerializer implements UrlSerializer {
    parse(url: any): UrlTree {
        let dus = new DefaultUrlSerializer();
        return dus.parse(url);
    }

    serialize(tree: UrlTree): any {
        let dus = new DefaultUrlSerializer(),
            path = dus.serialize(tree);
        // use your regex to replace as per your requirement.
        return path.replace(/%20/g,' ');
    }
}

`

import en tu app.module.ts

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

Escaping of URLs in Angular4 routerLink

1 Answers1