Как избежать декодирования queryParams в Angular с помощью CustomSerializer

Я получаю доступ к приложению Angular со стратегией URL queryParams ниже

Когда я пытаюсь получить доступ к http://localhost:4200/test?url=http://abc/item%2F2/3, Angular кодирует queryParams, поэтому я использовал CustomUrlSerializer для их декодирования, как показано ниже, но я хотел сохранить тот же queryParam без кодирования или декодирования

Но в настоящее время URL-адрес декодируется и отображается как http://localhost:4200/test?url=http://abc/item/2/3 в URL-адресе браузера.

Но я хочу, чтобы URL-адрес оставался прежним, например http://localhost:4200/test?url=http://abc/item%2F2/3.

Может ли кто-нибудь предоставить мне лучшее решение для этого случая?

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

export class MyUrlSerializer implements UrlSerializer {
    public ds = new DefaultUrlSerializer();

    parse(url: any): UrlTree {
        return this.ds.parse(url);
    }

    serialize(tree: UrlTree): any {
        const serializedUrl = this.ds.serialize(tree);
        return serializedUrl
            .replace(/%40/gi, '@')
            .replace(/%3A/gi, ':')
            .replace(/%24/gi, '$')
            .replace(/%2C/gi, ',')
            .replace(/%3B/gi, ';')
            .replace(/%20/gi, '+')
            .replace(/%3D/gi, '=')
            .replace(/%3F/gi, '?')
            .replace(/%2F/gi, '/');
    }
}

Демонстрация Slick Grid: https://stackblitz.com/edit/angular-router-basic-example-fm1xua


angular url-routing query-parameters angular2-routing
person Ron    schedule 04.09.2020    source источник
comment
Почему вы хотите разрешить такие символы в URL вашего приложения? Вы используете его вне углового приложения? Каков ваш вариант использования?   -  person Dipen Shah    schedule 12.09.2020

Ответы (1)


arrow_upward
3
arrow_downward

Как только вы отправляете какой-либо специальный символ через URL-адрес параметра строки запроса браузера, он автоматически кодируется/декодируется с помощью encodeURIComponent или decodeURIComponent. Обе являются глобальными функциями javascript.

Вы можете справиться с этим так:

const myUri = 'http://abc/item/2/3';

const myEncodedUri = encodeURIComponent(myUri);
console.log(myEncodedUri);
// http%3A%2F%2Fabc%2Fitem%2F2%2F3

const myDecodedUri = decodeURIComponent(myEncodedUri);
console.log(myDecodedUri);
// http://abc/item/2/3
person Willian    schedule 06.09.2020
comment
Нет, я думаю, вы не поняли мою проблему, я создал демонстрационную страницу Slick Grid Demo: stackblitz.com/edit/angular-router-basic-example-fm1xua Если вы видите эту ссылку, когда вы нажимаете на параметры маршрутизатора, вы видите, как URL-адрес изменяется на закодированный в URL-адресе. - person Ron; 06.09.2020
comment
Спасибо, что поделились примером кода. Однако каков ожидаемый результат? Кроме того, я изменил свой ответ. Посмотрим, поможет ли это. Ваше здоровье - person Willian; 06.09.2020