Question

这是我的路线数组。我希望任何带有-的路线都使用第一个组件，而其他任何路线都使用第二个组件。

[
    { 
        path: 'the-:param',
        component: MyComponent
    },
    { 
        path: ':param',
        component: MyOtherComponent
    }
]

任何想法如何实现这一目标。使用角度7。

Answer 1

当path和pathMatch的组合表达能力不足时，可以提供自定义URL匹配器。

function leadingtThe(url: UrlSegment[]) {
  return url.length === 1 && url[0].path.startsWith('the-') ? ({consumed: url}) : null;
}

const routes: Routes = [{ matcher: leadingtThe, component: MyComponent }];

这应与传入路径中的任何前导the-相匹配。

这里的url.length === 1可以确保url仅是一个段，如果该段不止一个，则该函数将返回null并且不匹配。

如果您想匹配以the-开头的任何网址，即使该网址有多个段，例如localhost:4200/the-anything/segment/someothersegment 那么应该是：

function leadingtThe(url: UrlSegment[]) {
  return url[0].path.startsWith('the-') ? ({consumed: url}) : null;
}

const routes: Routes = [{ matcher: leadingtThe, component: MyComponent }];

Angular Router-如何创建没有正斜杠的动态路由

1 个答案: