使用正则表达式作为 angular2 中路径的路径值

Question

我想为我的 angular2 应用程序配置路由。我的网址必须是这样的：

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 或 /floor2/something/something/....

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

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 不支持正则表达式。如果我不能使用正则表达式是错误的，请举个例子指出我的方向。如果没有，请指出正确的方向。

Answer 1

您可以通过为Route 提供matcher 密钥来使用UrlMatcher。不幸的是它是undocumented for now，所以你可能需要check the source of 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 有一个 provided ComplexUrlMatcher 的要点例子。它应该让您了解如何实现一个适合您需求的方案（遗憾的是没有许可证，因此您不能按原样使用它）。

Answer 2

尝试这样做：

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

Answer 3

迟到了，但如果你仍然有同样的问题，这里是我解决同样问题的方法..

这是我的路线

{
    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/浴室/镜子

您可以轻松地操纵此网址供您使用。

Answer 4

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

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
                    }
                ]
            }
        ]
    }
];

Answer 5

我知道您正在寻找正则表达式路径值，但可能还有另一种情况，即基于给定前缀，后跟未知 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