使用正则表达式获取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

网址可以类似于以下示例:

The url can be like following examples:

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.

推荐答案

您可以通过为matcher键来使用UrlMatcher/api/router/index/Route-interface.html"rel =" noreferrer> Route .不幸的是，它暂时未记录，因此您可能需要

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屋！