4

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

4

5 回答 5

8

您可以UrlMatcher通过为 a 提供matcher密钥来使用 a 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. 它应该让您了解如何实现一个适合您需求的方案（遗憾的是没有许可证，因此您不能按原样使用它）。

于 2017-04-01T06:43:39.170 回答
1

尝试这样做：

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

于 2017-02-07T22:10:04.130 回答
1

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

这是我的路线

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

它会给我

/myhouse/floor1/room1/浴室/镜子

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

于 2017-08-10T04:52:36.567 回答
0

这是解决此问题的方法。

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
                    }
                ]
            }
        ]
    }
];
于 2018-11-05T09:56:20.480 回答
0

我知道您正在寻找正则表达式路径值，但是当基于给定前缀，后跟未知 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

于 2020-02-26T09:58:13.363 回答