각도 4 라우터가있는 URL에서 라우터 매개 변수 사용

Question

prefix/foo-bar-1123, prefix/foo-bar-1123/bazquux-123 및 각도 4 라우터에서 이러한 종류의 URL을 사용하는 방법을 사용 하시겠습니까? 중요한 비트는 내가 잡으려고하는 숫자의 ID입니다.

나는 이것을 시도했지만 결과는 categorySlug-:categoryId 및 subcategorySlug-:subcategoryId이라는 단일 변수로 캡처 된 모든 데이터를 // 가져온 것입니다.

const routes = [{ 
    path: 'prefix/:categorySlug-:categoryId', 
    component: MyComponent, 
}, { 
    path: 'prefix/:categorySlug-:categoryId/:subcategorySlug-:subcategoryId', 
    component: MyComponent, 
}] 

export const MyRoute: ModuleWithProviders = RouterModule.forChild(routes) 

궁극적으로 나는 변수의 이러한 종류 끝내고 싶습니다

categorySlug=foo-bar 
categoryId=1123 
subcategorySlug=bazquux 
subcategoryId=123 

는 라우터가 지원하는이 뭔가? 라우터를 확장 할 수 있습니까?

Answer 1

일치하는 URL을 구현하고 URL에서 ID를 가져 오는 데 사용할 수있는 사용자 지정 UrlMatcher를 만듭니다. 이것은 적어도 Angular 4.4.3에서 작동합니다.

const categoryUrlMatcher = (url: UrlSegment[], group: UrlSegmentGroup, route: Route): UrlMatchResult => { 
    if (url.length != 2) { 
    return null 
    } 
    if (url[0].path !== 'prefix') { 
    return null 
    } 
    const categoryMatch = url[1].path.match(/(\w+)-(\d+)$/) 
    if (categoryMatch) { 
    return { 
     consumed: url, 
     posParams: { 
     categorySlug: new UrlSegment(categoryMatch[1], {}), 
     categoryId: new UrlSegment(categoryMatch[2], {}) 
     }} 
    } 
    return null 
} 

const routes: Routes = [ 
    { 
    matcher: categoryUrlMatcher, 
    component: MyComponent, 
    } 
]