角4のルータのURLでルータパラメータを使用する

Question

prefix/foo-bar-1123、prefix/foo-bar-1123/bazquux-123、角4ルータでこれらの種類のURLを使用する方法を使用しますか？重要なビットは、私がキャプチャしようとしている数値のIDです。

私はこれを試しましたが、その結果、categorySlug-:categoryIdとsubcategorySlug-:subcategoryIdという単一の変数に取り込まれた// charactersedのデータがすべて取得されています。

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

カスタムUrlMatcherを作成します。このUrlMatcherを使用して、URLからの一致IDおよびフェッチIDを実装できます。これは少なくとも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, 
    } 
]