CanMatch Router Guard

В Angular существуют гварды canLoad и canActivate, они используются для определения того, должен ли быть загружен лениво загруженный модуль или активирован соответственно. Их использование имеет два недостатка. Во-первых, обычно вам приходится определять их одновременно. Кроме того, нет простого способа определить несколько маршрутов с одинаковым путем, которые можно активировать в зависимости от определенных условий.

В Angular 14 появился новый гвард CanMatch, который решает эту проблему.

CanMatch будет контролировать, можем ли мы использовать маршрут и, как побочный эффект, можем ли мы загрузить код. Кроме того, когда один из определенных гвардов возвращает false, маршрут пропускается, и обрабатываются другие маршруты.

Мы можем, например, использовать CanMatch для загрузки разных компонентов в зависимости от флага. Например:

const routes: Routes = [
{
  path: 'todos',
  canMatch: [() => inject(FeatureFlagsService).hasPermission('todos-v2')],
  loadComponent: () => import('./todos-page-v2/todos-page-v2.component')
                        .then(v => v.TodosPageV2Component)
},
{
  path: 'todos',
  loadComponent: () => import('./todos-page/todos-page.component')
                         .then(v => v.TodosPageComponent)
}];

Когда функция гварда возвращает true, он загрузит и активирует новую версию списка задач; в противном случае будет использоваться старая версия.

Этот метод также может быть использован для загрузки различных компонентов в зависимости от роли пользователя.