如何避免由于参数中的斜杠而导致恶心的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... |

这可能就够了。考虑到我必须有包含斜杠的参数，有没有人有任何想法，尽可能让我的网站更好？

来源

2017-01-10 Zack

不知道为什么这是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 –

您无法防止斜杠被编码。我会用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属性，你可以订阅。

来源

2017-01-10 21:55:20

每个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。

来源

2017-06-03 07:06:19

如何避免由于参数中的斜杠而导致恶心的URL？

回答

相关问题