使用正则表达式获取angular2中路径的路径值

Question

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

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/....

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

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

如果url在url 的末尾有/ mirror,那么必须加载镜像组件,如果不加载login组件的话.将为上面显示的URL加载镜像.根据url的可变部分,每个镜像组件内部将具有不同的属性值.

对于登录组件,网址将如下:

HTTP://本地主机/的MyHouse

要么

HTTP://本地主机/的MyHouse/floor1

要么

HTTP://本地主机/的MyHouse/floor1/bathroom1

我试过想使用正则表达式,但似乎新版本的angular2不支持正则表达式.如果我错误地无法使用正则表达式,请通过示例向我指出这个方向.如果没有,请指出我正确的方向.

Answer 1

您可以使用a UrlMatcher提供matcher密钥Route.不幸的是,它现在没有文档,所以你可能需要检查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.它应该让你知道如何实现一个适合你的需求(遗憾的是没有许可证,所以你不能按原样使用它).