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

您无法阻止对斜杠进行编码。我会使用看起来更干净的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属性。

Answer 2

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中的斜杠被编码？

2 个答案: