将正则表达式用于 angular2 中路由的路径值 [英] Using regex for path value of routes in angular2

问题描述

我想为我的 angular2 应用程序配置路由.我的网址需要是这样的:

I want to configure route for my angular2 application. My URL needs to be like this:

http://domain_name/constant_value/variable_value/constant_value

网址可以如下例所示:

http://localhost/myhouse/floor1/mirror

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

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

这里的路由 /myhouse 和 /mirror 是不变的.但中间部分可以是 /floor1 或 /floor2/something/something/.... 之类的任何内容

Here the routes /myhouse and /mirror are constant. But the middle part can be anything like /floor1 or /floor2/something/something/....

如何在路由模块中定义路由.

How can i define a route for that in routing module.

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

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

Here the mirror component must be loaded if the url has /mirror at the end of the url if not login component should be loaded. Mirror will be loaded for the urls shown above. Each mirror component will have different propertise value inside according to the variable part of the url.

对于登录组件 url 将类似于:

For login component url will be like:

http://localhost/myhouse

或

http://localhost/myhouse/floor1

或

http://localhost/myhouse/floor1/bathroom1

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

I tried wanted to use regex but it seems the regex is not supported for newer version of angular2. If I am wrong on not being able to use regex please kindly point me to that direction with an example. If not please point me to right direction.

推荐答案

您可以通过为 Route.不幸的是，它暂时没有记录，因此您可能需要查看router/src/config.ts的来源:/p>

You could use a UrlMatcher by providing matcher key for a Route. Unfortunately it's undocumented for now, so you may need to 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;

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

This basically allows you to write a function that can do any kind of matching, including regular expressions.

它仍然是实验性的，所以没有很多例子，但是 github/matanshukry 有好心 提供ComplexUrlMatcher 的要点示例.它应该让您了解如何实现适合您需求的应用程序(遗憾的是没有许可证，因此您不能按原样使用它).

It's still experimental, so there aren't many examples around, but github/matanshukry has kindly provided a gist example of ComplexUrlMatcher. It should give you an idea how to implement one that suits your needs (sadly there's no license, so you can't use it as-is).

这篇关于将正则表达式用于 angular2 中路由的路径值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！