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} ）

我做了什么

我已經注冊了一個路由來處理Home，Category和Sub Category Pages，因為它們具有相同的UI，下面提到動態類別級別，

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

掙扎：

現在，我無法添加產品和用戶頁面的路由，我無法理解，如何在斜杠之后和產品和用戶頁面中的ids之前添加p和user前綴。 沒有這些前綴，路由工作正常。

產品和用戶頁面所需的URL示例

• 產品頁面（ http://example.com/p123-Product-Name ）
• 用戶頁面（ http://example.com/user123-User-Name ）

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

提前致謝。

Answer 1

謝謝@Yuriy重新打開這個，我已經得到了@IngoBürk評論的答案。 下面提到的Gist幫助我通過正則表達式創建路線。 https://gist.github.com/matanshukry/22fae5dba9c307baf0f364a9c9f7c115

作為參考，我在下面添加了源代碼，

/**
 * 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 };
    }
}

如何使用，

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

export const UserRoutes: Routes = [
  {
    path: 'users',
    component: UserComponent,
    children: [
      {
        path: '',
        component: UserListComponent
      },
      {
        matcher: ComplexUrlMatcher("id", /[0-9]+/),
        component: UserItemComponent
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(UserRoutes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

Answer 2

通常， router需要能夠將某個輸入字符串（ url ）與給定模式（ route ）匹配。 您希望確保單個輸入與多個模式不匹配，否則路由器將不知道向前移動的方式。

話雖這么說， Angular有[RouteGuard][1]的概念。 當URL與給定路由匹配時，RouteGuard（或其任何衍生物）會為路由過程提供掛鈎。

Answer 3

你可以使用“匹配器”。

請參閱： https ： //angular.io/api/router/UrlMatcher

我希望它有所幫助。 請享用！