2017-02-28 4 views
0

특정 구성 요소에 대한 url의 끝에 슬래시를 어떻게 추가 할 수 있습니까? (고객이 필요로하므로 주석을 추가 할 필요가 없으므로 후행 슬래시는 사용하지 마십시오.)각도 2 URL 매개 변수

미리 감사드립니다.

+0

난 당신이 정의를 필요로 추측 https://angular.io/docs/ts/latest/api/router /index/DefaultUrlSerializer-class.html –

답변

1

뒤에 슬래시가있는 경로를 정의한 다음 슬래시가있는 URL로 이동하여 원하는 결과를 얻을 수 있습니다. 라우터는 후행 슬래시로 인해 예상보다 한 단계 더 깊어지기 때문에 두통이 발생할 가능성이 높습니다.

경로
{ 
    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

0

사용자 정의 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 { }