Angular 2 url參數

Question

如何將尾部斜槓添加到特定組件的url結尾？ （我的客戶需要它，所以不需要添加註釋，不要使用尾部斜線）。

在此先感謝。

Answer 1

通過使用尾部斜線定義路線，然後確保使用斜槓導航到網址，可以達到預期的效果。這很可能會導致一些令人頭痛的問題，因爲路由器會比預期的更深一層，因爲後面的斜線。

路線

{ 
    path: 'a/', 
    component: AComponent 
}, 
{ 
    path: 'list/b/', 
    component: BComponent, 
} 

你可以得到路由器由定義的路徑後添加一個空字符串路徑添加結尾的斜線。如果你自己寫斜槓，就像[routerLink]="['/a/']"角將會刪除它。

鏈接

<p><a [routerLink]="['/a', '']">Component A</a></p> 

或

<p><a [routerLink]="['../a', '']">Component A</a></p> 

編程方式導航

this.router.navigate(['/a', '']); 

Demo

Answer 2

你可以嘗試實現自定義UrlSerializer。它可能是這個樣子：

import { DefaultUrlSerializer, UrlTree } from '@angular/router'; 

export class CustomUrlSerializer extends DefaultUrlSerializer { 
    parse(url: string): UrlTree { 
     return super.parse(url); 
    } 

    serialize(tree: UrlTree): string { 
     let url = super.serialize(tree); 
     url = url.length > 1 ? url += '/' : url; 

     return url; 
    } 
} 

然後在你的NgModule它提供：

@NgModule({ 
    declarations: [ 
    ... 
    ], 
    imports: [ 
    ... 
    ], 
    providers: [... 
       {provide: UrlSerializer, useClass: CustomUrlSerializer} 
       ], 
    bootstrap: [...] 
}) 
export class AppModule { }