使用URL中的路由器参数与角4路由器

Question

如何使用尝试使用这些类型的网与prefix/foo-bar-1123，prefix/foo-bar-1123/bazquux-123与Angular 4路由器？重要的部分是我试图捕获的数字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

创建一个自定义的UrlMatcher，可以用来实现URL的匹配和获取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, 
    } 
]