Angular2 路由器 : matching any url, 包括子目录

Question

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

这是开发的最初阶段，我正在研究路由器。

到目前为止，我必须创建一个主页、一个产品页面和一个错误页面。

产品页面的“旧”链接是这样的:/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,
    },
];

我目前的问题是我可以匹配任何东西，只要我的 url 没有任何斜杠。

• /abcdefg.html 有效(加载 ProductComponent)
• /a/b/c/d/e/f/g.html 没有(加载 Error404Component)
• /a/bcdefg.html 也不是

如何使这些 url 与其完整路径(包括所有斜线)相匹配？

Answer 1

最好在 Angular 中使用参数，你可以为路由定义参数

{ 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转到此链接以获取更多详细信息