Как избежать отвратительного поиска URL-адресов из-за слешков в моих параметрах?

Question

Я использую angular 2.0, в частности функции routing для этого вопроса. То, как я настроил свою маршрутизацию, выглядит так.

const routes: Routes = [ 
    { path : ':filePath', component: ParentDisplayComponent, 
     children : [ 
      { path : 'metadata', component: MetadataDisplayComponent }, 
      { path : 'data', component : DataDisplayComponent } 
     ] 
    } 
]; 

Таким образом, как вы можете видеть, мой url мог бы выглядеть так.

Однако, потому что я делаю файловый браузер рода, мой «путь к файлам» (начальный параметр) выглядит следующим образом.

/foo/bar/baz 

Для того, чтобы сделать эту работу, я должен был избежать косых черт, так что теперь мои URLs в конечном итоге выглядят как этот

<host>:<port>/#/%252ffoo%252fbar%252fbaz/metadata 

Я знаю, что это более или менее «нормально» , но я серьезно ненавижу внешний вид этого, и он не очень удобен для пользователя, поскольку он вводит URL вручную. Есть ли у кого-нибудь предложения о том, как сделать мои URL-адреса более удобными для пользователя? Мне нужен компонент родительского уровня, который отслеживает выбранный файл, поэтому я не делал ничего подобного.

<host>:<port>/#/metadata?path=/foo/bar/baz 

Причина этого заключается в том, что я хочу, чтобы мое приложение, чтобы иметь «браузер» (по аналогии с Windows Explorer,) на левой стороне экрана в любое время, с съемном компонентом в середине экрана , Сделайте что-нибудь подобное.

___________________________ 
|___________________________| 
|  | 
|file a | ____________________ 
|file b | |swappable component| 
|file c | --------------------- 
|etc... | 

Это, вероятно, довольно бессвязное. Кто-нибудь имеет какие-либо идеи относительно того, как сделать мои URL-адреса более приятными, учитывая, что у меня должны быть параметры, содержащие косые черты?

Answer 1

Вы не можете предотвратить кодирование косой черты. Я бы использовал matrix parameters, которые выглядят чище.

http://page.com/home/example;a=foo;b=bar;c=baz/something

Вы можете использовать Router 's NAVIGATE метода использовать их

this.router.navigate(['/home', '/example', { a: 'foo', b: 'bar', c: 'baz' }, '/something']);

Чтобы получить текущий Params, используйте ActivatedRoute' s params свойства, к которому вы можете подписаться.

Answer 2

Угловая2 по умолчанию использует encodeURIComponent() для кодирования URL-адресов запроса в URL-адресе, вы можете избежать этого, написав собственный сериализатор URL-адресов и переопределив функциональные возможности по умолчанию.

В моем случае я хотел избежать Angular2, чтобы избежать замены запятой (,) на (% 2). Я передавал Query как lang = en-us, en-uk, где он преобразовывался в lang = en-us% 2en-uk.

Вот как я работал его:

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(/%2/g,','); 
    } 
} 

Добавить ниже линии основного appModule.ts

import {UrlSerializer} from '@angular/router'; 
import {CustomUrlSerializer} from './CustomUrlSerializer'; 

@NgModule({ 
    providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }] 
}) 

Это не нарушит ваши функции по умолчанию и не увлечет URL-адрес в соответствии с вашими потребностями.