Angular 角度6-带前缀的动态路由

我正在开发一个角度通用应用程序。我想创建带有自定义前缀的动态路由，但找不到任何与我的案例相关的有用文档。任何帮助都将不胜感激

详细信息：

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

• 主页（

  http://example.com/

  ）
• 类别页面（

  http://example.com/{类别名称}

  ）
• 子类别页（

  http://example.com/{category_name}/{sub_category_name}

  ）
• 产品页面（

  http://example.com/p{product_id}-{product_name}

  ）
• 用户页面（

  http://example.com/user{user\u id}-{user\u name}

  ）

我所做的

我已经注册了一个单独的路由来处理主页、类别和子类别页面，因为它们具有与下面提到的动态类别级别相同的UI

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

挣扎：

现在，我无法添加产品和用户页面的路由，我无法理解如何在产品和用户页面中分别在斜杠后面和

ids

前面添加

p

和

User

前缀。如果没有这些前缀，路由工作正常

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

• 产品页（）
• 用户页（）

我正在使用

@angular/router

进行路由

---

提前感谢。

通常，

路由器

需要能够将特定的输入字符串（

url

）匹配到给定的模式（

route

）。您需要确保一个单个输入不匹配多个模式，否则路由器将不知道前进的方向

也就是说，Angular具有

[RouteGuard][1]

的概念。当url与给定路由匹配时，RouteGuard（或其任何衍生物）将钩子引入路由过程。

您可以使用“matcher”

见：

我希望这有帮助。

---

享受吧

谢谢，@Yuriy要重新打开这个，我已经从@Ingo Bürk的评论中得到了答案。 下面提到的要点帮助我创建了通过正则表达式的路由。

为了便于参考，我添加了以下来源：

/**
 * Copyright (c) Matan Shukry
 * All rights reserved.
 */

import { UrlSegment, UrlSegmentGroup, Route } from '@angular/router';

// export type UrlMatchResult = {
    // consumed: UrlSegment[]; posParams?: { [name: string]: UrlSegment };
// };

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
    return (
        segments: UrlSegment[],
        segmentGroup: UrlSegmentGroup,
        route: Route) => {

        const parts = [regex];
        const posParams: { [key: string]: UrlSegment } = {};
        const consumed: UrlSegment[] = [];

        let currentIndex = 0;

        for (let i = 0; i < parts.length; ++i) {
            if (currentIndex >= segments.length) {
                return null;
            }
            const current = segments[currentIndex];

            const part = parts[i];
            if (!part.test(current.path)) {
                return null;
            }

            posParams[paramName] = current;
            consumed.push(current);
            currentIndex++;
        }

        if (route.pathMatch === 'full' &&
            (segmentGroup.hasChildren() || currentIndex < segments.length)) {
            return null;
        }

        return { consumed, posParams };
    }
}

---

创建

http://example.com/p{product\U id}-{product\U name}

，我们可以将product\U id段分解为

：product\U id

，product\U name段分解为

：product\U name

。然后，您需要转到app.routing.js路由文件，并将url设置为：

{ path: 'http://example.com/p/:product_id/-/:product_name', component: ProductComponent } 

---

你可以通过编写一个自定义URL匹配器来实现这一点，请看。让我检查一下……你有相同的ui，甚至js？

{ path: 'http://example.com/p/:product_id/-/:product_name', component: ProductComponent }