角度路由器 - 如何在没有正斜杠的情况下创建动态路由

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并且不匹配。

如果你想匹配开头的任何URL 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 }];