如何避免由于参数中的斜杠而导致恶心的URL？
我正在使用angular 2.0，特别是针对此问题的routing功能。我设置路由的方式如下所示。如何避免由于参数中的斜杠而导致恶心的URL？
const routes: Routes = [
{ path : ':filePath', component: ParentDisplayComponent,
children : [
{ path : 'metadata', component: MetadataDisplayComponent },
{ path : 'data', component : DataDisplayComponent }
]
}
];
因此，大家可以看到，我的一个URL最后可能会变成这样。
但是，因为我在做各种各样的文件浏览器，我的“文件路径”（初始参数）这个样子。
/foo/bar/baz
为了使这项工作，我不得不逃避斜线，所以现在我的网址最后看起来像这样
<host>:<port>/#/%252ffoo%252fbar%252fbaz/metadata
我知道，这或多或少是“精” ，但我真的很讨厌这样的外观，并且它不是非常人性化，就手动输入url而言。有没有人有任何建议如何让我的网站更友好？我需要一个跟踪所选文件的父级组件，这就是为什么我没有这样做的原因。
<host>:<port>/#/metadata?path=/foo/bar/baz
这样做的原因是，我想我的应用程序有一个“浏览器”（类似于Windows资源管理器），在任何时候，屏幕的左侧，在屏幕中间的可交换组件。像这样的图片。
___________________________
|___________________________|
| |
|file a | ____________________
|file b | |swappable component|
|file c | ---------------------
|etc... |
这可能就够了。考虑到我必须有包含斜杠的参数，有没有人有任何想法，尽可能让我的网站更好？
您无法防止斜杠被编码。 我会用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属性，你可以订阅。
每个foo，bar和baz都不对应可选参数，尽管......“/ foo/bar/baz”指的是一个REQUIRED参数。 – Zack
这是唯一可以看起来干净的东西。 Angular的路由器并不是您的理想解决方案，创建自定义路由器可以帮助您解决问题。 –
我给这个尝试...像这样的一个url/metadata？path =/foo/bar/baz，从元数据组件中获取路径，从后端加载我需要的内容，然后将它广播到父母。如果我这样做，那么我需要确保每次更改组件时都不重新捕获数据......只有当路径查询参数更改时...... ahh ...我希望我们不使用斜杠我们的分隔符。好吧。不管怎么说，多谢拉！ – Zack
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。
不知道为什么这是downvoted。我在问一个合理的问题。 – Zack
[angular 2禁用url编码]可能的重复（http://stackoverflow.com/questions/41476193/angular-2-disable-url-encoding） –
检查我的答案在这里：http://stackoverflow.com/questions/ 41476193/angular-2-disable-url-encoding/41995695＃41995695 –