Angular 6-带前缀的动态路由

Question

我正在开发Angular Universal Application。我想创建带有自定义前缀的动态路由，但是找不到与我的案例有关的任何有用的文档。任何帮助将不胜感激...

细节：

我所拥有的是，我有4个页面，其中包含4个不同的动态URL：

• 主页（http://example.com/）
• 分类页（http://example.com/{category_name}）
• 子类别页面（http://example.com/{category_name}/{sub_category_name}）
• 产品页（http://example.com/p{product_id}-{product_name}）
• 用户页面（http://example.com/user{user_id}-{user_name}）

我做了什么

我注册了一条处理“主页”，“类别”和“子类别”页面的方法，因为它们具有相同的UI，且具有以下所述的动态类别级别，

RouterModule.forRoot([
      {path: '**', component: HomeComponent, data: {title: 'Home', description: 'Homepage - quick overview.'}}
    ])

挣扎：

现在，我无法添加产品和用户页面的路由，我无法理解，如何分别在产品页面和用户页面中的斜线之后和之前添加p和添加user前缀ids。没有这些前缀，路由工作正常。

产品和用户页面所需URL的示例

• 产品页面（http://example.com/p123-Product-Name）
• 用户页面（http://example.com/user123-用户名）

我正在使用@angular/router路由。

提前致谢。

Answer 1

谢谢，@Yuriy 重新打开这个，我已经从 @Ingo B\xc3\xbcrk\ 的评论中得到了答案。\n下面提到的Gist帮助我通过正则表达式创建路由。\n https://gist.github .com/matanshukry/22fae5dba9c307baf0f364a9c9f7c115

\n\n

作为参考，我添加了下面的来源，

\n\n

/**\n * Copyright (c) Matan Shukry\n * All rights reserved.\n */\n\nimport { UrlSegment, UrlSegmentGroup, Route } from \'@angular/router\';\n\n// export type UrlMatchResult = {\n    // consumed: UrlSegment[]; posParams?: { [name: string]: UrlSegment };\n// };\n\nexport function ComplexUrlMatcher(paramName: string, regex: RegExp) {\n    return (\n        segments: UrlSegment[],\n        segmentGroup: UrlSegmentGroup,\n        route: Route) => {\n\n        const parts = [regex];\n        const posParams: { [key: string]: UrlSegment } = {};\n        const consumed: UrlSegment[] = [];\n\n        let currentIndex = 0;\n\n        for (let i = 0; i < parts.length; ++i) {\n            if (currentIndex >= segments.length) {\n                return null;\n            }\n            const current = segments[currentIndex];\n\n            const part = parts[i];\n            if (!part.test(current.path)) {\n                return null;\n            }\n\n            posParams[paramName] = current;\n            consumed.push(current);\n            currentIndex++;\n        }\n\n        if (route.pathMatch === \'full\' &&\n            (segmentGroup.hasChildren() || currentIndex < segments.length)) {\n            return null;\n        }\n\n        return { consumed, posParams };\n    }\n}\n

\n\n

如何使用，

\n\n

/**\n * Copyright (c) Matan Shukry\n * All rights reserved.\n */\n\nexport const UserRoutes: Routes = [\n  {\n    path: \'users\',\n    component: UserComponent,\n    children: [\n      {\n        path: \'\',\n        component: UserListComponent\n      },\n      {\n        matcher: ComplexUrlMatcher("id", /[0-9]+/),\n        component: UserItemComponent\n      },\n    ]\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(UserRoutes)],\n  exports: [RouterModule]\n})\nexport class UserRoutingModule { }\n

\n