如何防止 URL 中的斜杠被编码？

Question

我正在使用angular 2.0，特别是routing 功能来解决这个问题。我设置路由的方式如下所示。

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

如您所见，我的网址可能最终看起来像这样。

<host>:<port>/#/<file path>/metadata

但是，因为我正在制作一个文件浏览器，所以我的“文件路径”（初始参数）看起来像这样。

/foo/bar/baz

为了完成这项工作，我不得不避开斜线，所以现在我的网址最终看起来像这样

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

我知道这或多或少“很好”，但我非常讨厌它的外观，而且就手动输入网址而言，它对用户不是很友好。有人对如何使我的网址更加用户友好有任何建议吗？我确实需要一个父级组件来跟踪所选文件，这就是为什么我没有做这样的事情。

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

这样做的原因是我希望我的应用程序始终在屏幕左侧有一个“浏览器”（类似于 Windows 资源管理器），在屏幕中间有一个可交换组件。想象一下这样的东西。

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

这大概就够啰嗦了。考虑到我必须有包含斜杠的参数，有没有人有任何想法让我的网址更好？

Answer 1

Angular2 默认使用 encodeURIComponent() 对 URL 中的 queryParams 进行编码，您可以通过编写自定义 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。

Answer 2

您无法阻止对斜线进行编码。 我会使用看起来更干净的matrix parameters。

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

你可以使用Router的导航方法来使用它们

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

要获取当前参数，请使用您可以订阅的ActivatedRoute 的params 属性。