Angular 6-带前缀的动态路由 [英] Angular 6 - Dynamic Routing with Prefix
问题描述
我正在开发Angular通用应用程序.我想创建带有自定义前缀的动态路由,但是找不到与我的案例有关的任何有用的文档.任何帮助将不胜感激...
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...
详细信息:
我所拥有的是4个页面,其中包含4个不同的动态URL:
What I have is, I have 4 pages with 4 different dynamic URLs which are:
- 主页(
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 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}
)
我做什么
我已经注册了一条处理主页",类别"和子类别"页面的路由,因为它们具有相同的UI,且具有以下所述的动态类别级别,
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.'}}
])
苦苦挣扎:
现在,我无法添加产品页面和用户页面的路由,我无法理解,如何分别在产品页面和用户页面中的斜线之后和ids
之前添加p
和user
前缀.没有这些前缀,路由工作正常.
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.
产品&必填URL的示例用户页面
- 产品页面( http://example.com/p123-Product-Name )
- 用户页面(
http://example.com/user123-用户名)
- Product Page (http://example.com/p123-Product-Name)
- User Page (http://example.com/user123-User-Name)
我正在使用@angular/router
进行路由.
谢谢.
推荐答案
感谢@Yuriy重新打开它,我已经从@IngoBürk的评论中得到了答案. 下面提到的 Gist 帮助我通过正则表达式创建了路由. https://gist.github.com/matanshukry/22fae5dba9c307baf0f364a9c9f7c115
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 };
}
}
使用方法
/**
* 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屋!