如何避免由於參數中的斜槓而導致噁心的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？

回答

相關問題