Маршруты

Stable Type-alias

Что делает

Представляет конфигурацию маршрутизатора.

Обзор интерфейса

interface Routes {
}

Описание интерфейса

Routes — это массив конфигураций маршрутов. Каждый маршрут имеет следующие свойства:

• path — строка, использующая DSL-синтаксис для сопоставления маршрутов.
• pathMatch — строка, определяющая стратегию сопоставления.
• matcher определяет пользовательскую стратегию сопоставления путей и переопределяет path и pathMatch. Дополнительная информация доступна в UrlMatcher.
• component — тип компонента.
• redirectTo — фрагмент URL, который заменит текущий сопоставленный сегмент.
• outlet — имя выхода (outlet), в который должен быть помещен компонент.
• canActivate — массив токенов DI, используемых для поиска обработчиков CanActivate. Дополнительная информация доступна в CanActivate.
• canActivateChild — массив токенов DI, используемых для поиска обработчиков CanActivateChild. Дополнительная информация доступна в CanActivateChild.
• canDeactivate — массив токенов DI, используемых для поиска обработчиков CanDeactivate. Дополнительная информация доступна в CanDeactivate.
• canLoad — массив токенов DI, используемых для поиска обработчиков CanLoad. Дополнительная информация доступна в CanLoad.
• data — дополнительные данные, предоставляемые компоненту через ActivatedRoute.
• resolve — словарь токенов DI, используемых для поиска решателей данных. Дополнительная информация доступна в Resolve.
• children — массив определений дочерних маршрутов.
• loadChildren — ссылка на лениво загруженные дочерние маршруты. Дополнительная информация доступна в LoadChildren.

Простая конфигурация

[{
  path: 'team/:id',
 component: Team,
  children: [{
    path: 'user/:name',
    component: User
  }]
}]

При переходе по адресу /team/11/user/bob, маршрутизатор создаст компонент team с компонентом user внутри.

Несколько выходов (outlets)

[{
  path: 'team/:id',
  component: Team
}, {
  path: 'chat/:user',
  component: Chat
  outlet: 'aux'
}]

При переходе по адресу /team/11(aux:chat/jim), маршрутизатор создаст компонент team рядом с компонентом chat. Компонент chat будет помещен в выход aux.

Подстановочные знаки (wild cards)

[{
  path: '**',
  component: Sink
}]

Независимо от того, куда вы перейдете, маршрутизатор инициализирует компонент sink.

Перенаправления

[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: 'legacy/user/:name',
    redirectTo: 'user/:name'
  }, {
    path: 'user/:name',
    component: User
  }]
}]

При переходе по адресу '/team/11/legacy/user/jim', маршрутизатор изменит URL на '/team/11/user/jim', а затем инициализирует компонент team с компонентом user внутри.

Если значение redirectTo начинается с '/', это абсолютное перенаправление. Например, если в примере выше мы изменим redirectTo на /user/:name, результирующий URL будет '/user/jim'.

Пустой путь

Конфигурации маршрутов с пустым путем могут использоваться для инициализации компонентов, которые не 'потребляют' сегменты URL. Рассмотрим следующую конфигурацию:

[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: AllUsers
  }, {
    path: 'user/:name',
    component: User
  }]
}]

При переходе по адресу /team/11, маршрутизатор инициализирует компонент AllUsers.

Маршруты с пустым путем могут иметь дочерние маршруты.

[{
  path: 'team/:id',
  component: Team,
  children: [{
    path: '',
    component: WrapperCmp,
    children: [{
      path: 'user/:name',
      component: User
    }]
  }]
}]

При переходе по адресу /team/11/user/jim, маршрутизатор инициализирует компонент wrapper с компонентом user внутри.

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

Стратегия сопоставления

По умолчанию маршрутизатор проверяет, что оставшаяся часть URL начинается с указанного пути (например, /team/11/user начинается с team/:id).

Мы можем изменить стратегию сопоставления, чтобы убедиться, что путь охватывает весь неиспользованный URL, что аналогично unconsumedUrl === path или $ регулярным выражениям.

Это особенно важно при перенаправлении маршрутов с пустым путем.

[{
  path: '',
  pathMatch: 'prefix', //default
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]

Поскольку пустой путь является префиксом любого URL, даже при переходе по адресу '/main', маршрутизатор все равно применит перенаправление.

Если pathMatch: full указан, маршрутизатор применит перенаправление только при переходе по адресу '/'.

[{
  path: '',
  pathMatch: 'full',
  redirectTo: 'main'
}, {
  path: 'main',
  component: Main
}]

Маршруты без компонентов

Иногда полезно иметь возможность обмениваться параметрами между компонентами-братьями.

Предположим, у нас есть два компонента — ChildCmp и AuxCmp — которые мы хотим расположить рядом и оба им требуется параметр id.

Один из способов сделать это — создать фиктивный родительский компонент, чтобы оба компонента могли получить параметр id от него. Это не оптимально. Вместо этого можно использовать маршрут без компонента.

[{
   path: 'parent/:id',
   children: [
     { path: 'a', component: MainChild },
     { path: 'b', component: AuxChild, outlet: 'aux' }
   ]
}]

Таким образом, при переходе по адресу parent/10/(a//aux:b), маршрут инициализирует компоненты main child и aux child рядом. В этом примере компонент application должен иметь определены primary и aux выходы.

Маршрутизатор также объединит params, data, и resolve родительского компонента без компонента в params, data, и resolve дочерних компонентов. Это делается потому, что нет компонента, который может инжектировать активированный маршрут родительского компонента без компонента.

Это особенно полезно, когда дочерние компоненты определены следующим образом:

[{
   path: 'parent/:id',
   children: [
     { path: '', component: MainChild },
     { path: '', component: AuxChild, outlet: 'aux' }
   ]
}]

С этой конфигурацией, при переходе по адресу '/parent/10' будут созданы компоненты main child и aux.

Ленивая загрузка

Ленивая загрузка ускоряет загрузку приложения, разбивая его на несколько пакетов и загружая их по требованию. Маршрутизатор разработан для упрощения ленивой загрузки. Вместо свойства children, можно указать свойство loadChildren, как показано ниже:

[{
  path: 'team/:id',
  component: Team,
  loadChildren: 'team'
}]

Маршрутизатор воспользуется зарегистрированным NgModuleFactoryLoader для получения NgModule, связанного с 'team'. Затем он извлечёт набор маршрутов, определенных в этом NgModule, и прозрачно добавит эти маршруты в основную конфигурацию.

экспортировано из @angular/router/index, определено в @angular/router/src/config.ts