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 ，则必须加载镜像组件，如果不加载登录组件的话。将为上面显示的URL加载镜像。根据网址的可变部分，每个镜像组件内部都有不同的属性值。

对于登录组件，网址将如下：

http://localhost/myhouse

或

http://localhost/myhouse/floor1

或

http://localhost/myhouse/floor1/bathroom1

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

Answer 1

您可以通过为Route提供UrlMatcher密钥来使用matcher。不幸的是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>作为模板，没有其他内容。（如果您还需要其他任何内容，那么

在我的MyhouseComponent ngOnInit我正在做这个

_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

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

5 个答案: