角度路由器 - 如何在沒有正斜杠的情況下創建動態路由

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 }];