Как передать параметр в функцию соответствия маршрута в Angular 9?

Question

API UrlMatcher изменился в Angular 9. Я передавал параметр вспомогательной функции соответствия следующим образом в Angular 8:

export function matcherHelper(segments: UrlSegment[], providerParam) {
  //... Logic here
  return ....;
}

Маршрут:

{
  matcher: (url) => matcherHelper(url, 'xxx'),
  loadChildren: () => import('./xxx/auth.module').then(m => m.AuthModule),
}

Но вышеприведенное в Angular 9 изменено на следующее:

{
  matcher: matcherHelper('xxx'),
  loadChildren: () => import('./xxx/auth.module').then(m => m.AuthModule),
}

В вышеприведенном по умолчанию UrlSegment[] передается как первый параметр по умолчанию, но, поскольку у меня есть два параметра синтаксис недопустим, потому что вспомогательная функция ожидает два параметра вместо одного.

Это работает только в том случае, если я использую его, как указано ниже, без каких-либо параметров (UrlSegment по умолчанию передается по следующему маршруту):

{
  matcher: matcherHelper,
 loadChildren: () => import('./xxx/auth.module').then(m => m.AuthModule),
}

https://angular.io/api/router/UrlMatcher

Answer 1

Обходной путь для этого заключается в создании оболочки для вспомогательной функции соответствия. Единственным недостатком является наличие одной оболочки для каждого маршрута.

export function firstMatcher(segments: UrlSegment[]) {
  return matcherHelper(segments, 'firstParam')
}

export function secondtMatcher(segments: UrlSegment[]) {
  return matcherHelper(segments, 'secondParam')
}

export function matcherHelper(segments: UrlSegment[], providerParam) {
  // Logic and return
}

Answer 2

API UrlMatcher следует использовать только в том случае, если шаблонов сопоставления по умолчанию Angular недостаточно.

Если вам необходимо передать данные stati c, вы можете попробуйте это:

{
    path: 'somePath',
    component: SomeComponent,
    data: { string: 'xxx' }
 }

Если вы хотите передать строковую переменную, вы можете передать ее как часть URL, а затем сопоставить ее с помощью path:

<a [routerLink]="['/somePath', 'xxx']">

а затем:

{ path: 'somePath/:string', component: SomeComponent }

Вы также можете передать его как queryParam:

<a [routerLink]="['/somePath']" [queryParams]="{ string: 'xxx'}"> 

Это приведет к следующему URL:

http://yourHost/somePath?string:xxx

Там Есть еще много возможных стратегий маршрутизации. Прочитать документы . Если ваши данные должны поступать из какого-либо API, вы можете использовать resolver .