Angular 6 - 带前缀的动态路由 [英] Angular 6 - Dynamic Routing with Prefix

问题描述

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

详情:

我所拥有的是，我有 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-User-Name)

我正在使用 @angular/router 进行路由.

提前致谢.

解决方案

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

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

/*** 版权所有 (c) Matan Shukry* 版权所有.*/从@angular/router"导入 { UrlSegment, UrlSegmentGroup, Route };//导出类型 UrlMatchResult = {//消耗:UrlSegment[];posParams?: { [name: string]: UrlSegment };//};导出函数 ComplexUrlMatcher(paramName: string, regex: RegExp) {返回 (段:UrlSegment[]，段组:UrlSegmentGroup，路线:路线)=>{const 部分 = [正则表达式];const posParams: { [key: string]: UrlSegment } = {};const 消耗:UrlSegment[] = [];让 currentIndex = 0;for (let i = 0; i 

如何使用，

/*** 版权所有 (c) Matan Shukry* 版权所有.*/导出 const 用户路由:路由 = [{路径:'用户'，组件:用户组件，孩子们: [{小路: ''，组件:用户列表组件},{匹配器:ComplexUrlMatcher("id",/[0-9]+/),组件:UserItemComponent},]}];@NgModule({进口:[RouterModule.forChild(UserRoutes)],出口:[路由器模块]})导出类 UserRoutingModule { }

I am working on an Angular Universal Application. I want to create dynamic routes with custom prefix but I am unable find any helpful documentation related with my case. Any Help will be appreciated...

Details:

What I have is, I have 4 pages with 4 different dynamic URLs which are:

• Home Page (http://example.com/)
• Category Page (http://example.com/{category_name})
• Sub Category Page (http://example.com/{category_name}/{sub_category_name})
• Product Page (http://example.com/p{product_id}-{product_name})
• User Page (http://example.com/user{user_id}-{user_name})

What I did

I have registered a single route to handle Home, Category and Sub Category Pages because they have same UI with dynamic category levels mentioned below,

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

Struggling:

Now, I am unable to add the routes for Product and User Page, I am unable to understand, how to add p and user prefixs after slash and before ids in Product and User Pages respectively. Without these prefixs, routing is working fine.

Examples of Required URLs for Product & User Pages

• Product Page (http://example.com/p123-Product-Name)
• User Page (http://example.com/user123-User-Name)

I am using @angular/router for routing.

Thanks in advance.

解决方案

Thanks, @Yuriy to reopen this, I have already got the answer from @Ingo Bürk's comment. The below mentioned Gist helped me to create routes through the regex. https://gist.github.com/matanshukry/22fae5dba9c307baf0f364a9c9f7c115

For reference, I have added the source below,

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

How to use,

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

这篇关于Angular 6 - 带前缀的动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！