使用正则表达式表示angular2中路由的路径值

我想为angular2应用程序配置路由。我的URL需要这样：

http://domain_name/constant_value/variable_value/constant_value

url可以像以下示例一样：

http://localhost/myhouse/floor1/mirror

http://localhost/myhouse/floor1/room1/mirror

http://localhost/myhouse/floor1/room1/bathroom/mirror

这里的路由/myhouse和/mirror是恒定的。但中间部分可以是类似于/floor1或/foor2/某物/某物/…的任何东西

如何在路由模块中为其定义路由。

const routes: Routes = [
{
path: 'myhouse',
children: [
{
path: ..., //here how do i configure it
children: [
{
path: '/mirror',
component: MirrorComponent            
}
]
}
]
}
];

如果url的末尾有/mirror，则必须加载镜像组件。如果没有，则应加载登录组件。将为上面显示的url加载镜像。根据url的可变部分，每个镜像组件内部将具有不同的属性值。

对于登录组件，url将类似于：

http://localhost/myhouse

或

http://localhost/myhouse/floor1

或

http://localhost/myhouse/floor1/bathroom1

我试图使用正则表达式，但新版本的angular2似乎不支持正则表达式。如果我不能使用regex是错误的，请用一个例子向我指出这个方向。若并没有，请给我指正确的方向。

您可以通过为Route提供matcher密钥来使用UrlMatcher。不幸的是，它现在还没有记录，所以你可能需要检查router/src/config.ts:的来源

/**
* @whatItDoes Represents the results of the URL matching.
*
* * `consumed` is an array of the consumed URL segments.
* * `posParams` is a map of positional parameters.
*
* @experimental
*/
export type UrlMatchResult = {
consumed: UrlSegment[]; posParams?: {[name: string]: UrlSegment};
};
/**
* @whatItDoes A function matching URLs
*
* @description
*
* A custom URL matcher can be provided when a combination of `path` and `pathMatch` isn't
* expressive enough.
*
* For instance, the following matcher matches html files.
*
* ```
* function htmlFiles(url: UrlSegment[]) {
*  return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
* }
*
* const routes = [{ matcher: htmlFiles, component: HtmlCmp }];
* ```
*
* @experimental
*/
export type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) =>
UrlMatchResult;

这基本上允许您编写一个可以进行任何类型匹配的函数，包括正则表达式。

它仍然是实验性的，所以周围没有太多的例子，但github/matanshukry友好地提供了ComplexUrlMatcher的一个重要例子。它应该让你知道如何实现一个适合你需求的许可证(遗憾的是，没有许可证，所以你不能按原样使用它)。

尝试这样做：

const routes: Routes = [
{
path: 'myhouse',
children: [
{
path: ':name', //FOR VARIABLE VALUE
children: [
{
path: 'mirror', //REMOVE SLASH
component: MirrorComponent            
}
]
}
]
}
];

在这里，您可以找到更好的解释：http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes

回答晚了，但如果你仍然有同样的问题，下面是我解决同样问题的方法。。

这是我的路线

{
path: 'myhouse',
component: MyParenthouseComponent,
children : [{
path: '**',
component: MyhouseComponent
}]
}

我已经将myhouse定义为父路由，并为其定义了**子路由。父组件MyParenthouseComponent包含一个<router-outlet></router-outlet>作为模板，没有其他内容。(如果你还需要什么，那就由你决定)

在我的MyhouseComponentngOnInit中，我只是在做这个

_router.events.subscribe((val) => {
console.log(val);
if(val instanceof NavigationEnd) {
var url = this._router.url;
//do anything with url
}
});

像这样的导入路线

import { Router, ActivatedRoute, ParamMap, NavigationStart, NavigationEnd } from '@angular/router';

这将为我获取当前路线

例如，在这种路线的情况下

http://localhost/myhouse/floor1/room1/bathroom/mirror

它会给我

/myhouse/floor1/room1/浴室/镜子

您可以轻松地操作此url以供使用。

以下是解决此问题的方法。

import { Routes, UrlSegment } from '@angular/router';
const myHouseRouteMatcher =
(url: UrlSegment[]) => ({ consumed: url.slice(0, -1) });
const routes: Routes = [
{
path: 'myhouse',
children: [
{
matcher: myHouseRouteMatcher,
children: [
{
path: 'mirror',
component: MirrorComponent
},
{
path: 'bathtub',
component: BathtubComponent
}
]
}
]
}
];

我知道您正在寻找regex路径值，但如果基于给定前缀，后跟未知URL，则可能会出现另一种情况，您需要进行重定向。

这里我有一个例子：

const routes: Routes = [
{
path: 'vacancies', 
component: VacanciesContainer,
children: [
{ 
path: '', 
component: VacanciesComponent 
},
{ 
path: 'create', 
component: VacancyCreateComponent 
}
]
},
{
path: 'users', 
component: UsersContainer,
children: [
{ 
path: '', 
component: UsersComponent 
},
{ 
path: 'create', 
component: UserCreateComponent 
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
]
},
{ 
path: '**', redirectTo: 'vacancies', pathMatch: 'full' 
}];

这解决了什么问题？

对于URL：/users/something-wrong将被重定向到/users。

对于URL：/something-wrong/something-else将重定向到/vacancies

相关内容

最新更新

热门标签：