代码之家 › 专栏 › 技术社区 › Orange Lux

Angular2路由器:匹配任何url,包括子目录

seo routing angular

Orange Lux · 技术社区 · 7 年前

到目前为止,我必须创建一个主页、一个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 不(加载Error404组件)
/a/bcdefg.html 也不是

2 回复 | 直到 7 年前

Sheik Althaf 7 年前

最好一起去 parameters 在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 },

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 点击此链接了解更多详细信息