Question

我正在使用Angular2更新旧网站，其中一个先决条件是所有网址仍必须匹配。

这是开发的开始，我正在开发路由器。

到目前为止，我必须创建一个homePage，一个productPage和一个errorPage。

产品页面的“旧”链接如下所示： /category/subcategory/some/eventual/other/things/productName-id.html

我复制了Matan Shukry's Complex Url Matcher，这是我当前的代码：

import { ComplexUrlMatcher } from '../../functions/complex.url.matcher';

const appRoutes: Routes = [
    {
        path:      '',
        component: HomepageComponent,
    },
    {
        matcher:   ComplexUrlMatcher('product', /.*/), // very permissive regex here, in order to test
        component: ProductComponent,
    },
    {
        path:      '**',
        component: Error404Component,
    },
];

我目前的问题是，如果我的网址没有任何斜线，我可以匹配任何内容。

/abcdefg.html有效（加载ProductComponent）
/a/b/c/d/e/f/g.html没有（加载Error404Component）
/a/bcdefg.html并非

如何使这些网址与其完整路径匹配（包括所有斜线？）。

Answer 1

最好与角度parameters一起使用，你可以为路线定义参数

{ path: 'hero/:a/:b/:c/:d/:e/:f/:g', component: HeroDetailComponent },
{ path: 'hero/:a/:b/:c/:d/:e/:f', component: HeroDetailComponent },
{ path: 'hero/:a/:b/:c/:d/:e', component: HeroDetailComponent },
{ path: 'hero/:a/:b/:c/:d', component: HeroDetailComponent },
{ path: 'hero/:a/:b/:c', component: HeroDetailComponent },
{ path: 'hero/:a/:b', component: HeroDetailComponent },
{ path: 'hero/:a', component: HeroDetailComponent },
{ path: 'hero', component: HeroDetailComponent },

然后订阅paramMap

HeroDetailComponent 

import { ActivatedRoute } from '@angular/router';

constructor(
    private route: ActivatedRoute
) { }

this.route.paramMap.subscribe(params => {
  console.log(params);
});

您将获得订阅中的所有参数并执行操作

此处id是一个参数。同样，您可以将多个参数传递给您的路线创建路线结构

https://angular.io/guide/router#route-parameters-required-or-optional请点击此链接了解详情

Answer 2

我终于找到了一种方法，由anein's function帮助（谢谢，老兄！）。

Matan Shukry的方法对我的需求来说并不复杂。

以下是我的要点：https://gist.github.com/MarcBrillault/87f8df9610cfa3ed112afc3f8da474e8

编辑：gist已更新。

Angular2路由器：匹配任何网址，包括子目录

2 个答案: