Angular 6 - Динамическая маршрутизация с префиксом

Question

Я работаю над универсальным угловым приложением.Я хочу создать динамические маршруты с пользовательским префиксом, но не могу найти какую-либо полезную документацию, связанную с моим делом.Любая помощь будет оценена ...

Подробности:

У меня есть 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 иСтраницы подкатегорий, поскольку они имеют одинаковый пользовательский интерфейс с динамическими уровнями категорий, указанными ниже,

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-User-Name)

Я использую @angular/router для маршрутизации.

Заранее спасибо.

Answer 1

Вы можете использовать "matcher".

См .: https://angular.io/api/router/UrlMatcher

Надеюсь, это помогло.Наслаждайтесь!

Answer 2

Спасибо, @Yuriy, чтобы открыть это, я уже получил ответ от комментария @Ingo Bü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 3

Обычно router должен соответствовать определенной входной строке (url) данному шаблону (route).Вы хотите убедиться, что одиночный вход не соответствует нескольким шаблонам, иначе маршрутизатор не будет знать, какой путь двигаться вперед.

При этом, Angular имеет понятие [RouteGuard][1].RouteGuard (или любое из его производных) дает возможность подключиться к процессу маршрутизации, когда URL соответствует данному маршруту.