Angular Route (angular/router), если вы хотите, чтобы пользователи переходили на разные страницы в вашем приложении.

Вы можете использовать

Иличество архитектур SPA, Angular обеспечивает сопоставление URL-маршрута с компонентом. Конфигурация маршрута представляет собой иерархическую структуру, в которой каждый лист иерархии связан с определенным компонентом.

Конфигурация маршрута

Для настройки маршрутизации в вашем проекте вам сначала нужно импортировать модуль Route и RouterModule из @angular/routerJust like maj

import { Routes, RouterModule } from '@angular/router';

Operty - это URL, который будет обрабатывать маршрут, а свойство component - это имя компонента, который мы хотим отобразить, когда URL соответствует пути. Затем вы устанавливаете отображение URL на компоненты, то, что называется конфигурацией Route, в своей основе это массив типа Routes.

const routes: Routes = [
  { path: '', component: AboutComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
];

Путь пр

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

NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true }),
  ]

При вызове статического метода RouterModule.forRoot он зарегистрирует маршруты верхнего уровня и вернет модуль маршрутизации (с провайдерами), который должен быть импортирован корневым модулем приложения.

Он Router глобально. В вашем приложении может быть только один маршрутизатор, поэтому вы можете вызвать forRoot только один раз в вашем приложении. Все функциональные модули будут использовать forChild, чтобы не создавать еще один Router.

Вот пример приложения, использующего приведенную выше конфигурацию маршрутов:

Https://stackblitz.com/edit/angular-g8do3z?file=src/main.ts Модуль Router компании Angular создает экземпляр t

Модуль маршрутизации

Также вы можете сделать отдельный модуль для хранения конфигурации маршрутизации вне основного модуля, вот пример:

https://stackblitz.com/edit/angular-sqvehn?file=src/main.ts

Механизм Router реагирует на маршрут и рендерит соответствующий компонент в <router-outlet> placeholder. Мы должны разместить <router-outlet></router-outlet> в месте, где мы хотим, чтобы Angular динамически рендерил маршрутизируемые компоненты, например, я разместил outlet в шаблоне AppContainerComponent.

<div>
  container:
  <router-outlet></router-outlet>
</div>

Ltiple <router-outlet> place holders in the same template or project. Для этого вам нужно будет использовать вспомогательную маршрутизацию, поэтому вам нужно будет дать имя вашему <router-outlet>

<div>
  container (app routing):
  <router-outlet></router-outlet>
  <router-outlet name = "secondary"></router-outlet>
</div>

И настроить конфигурацию маршрута с дополнительным свойством outlet:

const routes: Routes = [
  { path: '', component: AboutComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },

  { path: '', outlet: 'secondary', component: AboutComponent },
  { path: 'about', outlet: 'secondary', component: AboutComponent },
  { path: 'contact', outlet: 'secondary', component: ContactComponent },

  { path: 'home', outlet: 'secondary', component: HomeComponent },
  { path: 'news', outlet: 'secondary', component: NewsComponent },
];

Вот пример проекта, использующего несколько роутеров-выходов:Можно иметь му

https://stackblitz.com/edit/angular-5gasqt?file=src/app-routing.module.ts

Есть несколько способов инициировать переход к маршруту. Вы можете использовать атрибут [routerLink] или обработчик событий.

Или /app-header.component.ts для использования обработчика событий, использующего метод Router's navigate.

Здесь мы сначала используем preventDefault() и выполняем this.router.nagivate с объектом, аналогичным конфигурации routerLink.

Маршрут URL изменится на следующий шаблон при нажатии на 2-ой ряд кнопок:

#/home(secondary:about)

Это указывает Angular, что мы перешли к "home" в качестве основного выхода и "about" для вторичного выхода.

skipLocationChangeThe

Случае (secondary:about) не будет частью URL.

Вот пример, когда эта опция установлена в true в обработчике клика и [routerLink] :Обратите внимание на skipLocationChange в методе changeRoute, включение этой опции изменит маршрут без изменения URL браузера, в нашем

https://stackblitz.com/edit/angular-czdwi4?file=src/app-header/app-header.component.html

Обратите внимание, что 2-й ряд навигационных ссылок работает как и раньше, но Router больше не меняет URL-маршрут в браузере!

Дочерние маршруты

RouterModule.forChild(routes)

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

например, создать новый лениво загружаемый модуль, который будет содержать несколько маршрутов. Вместо того чтобы добавлять эти маршруты непосредственно в модуль AppRoutingModule, вы можете сохранить разделение забот, используя метод forChild.Предположим, вы хотите

Ly загружает модули, что означает, что как только приложение загружается, загружаются и все модули, независимо от того, нужны они или нет. Для больших приложений с большим количеством маршрутов следует использовать ленивую загрузку - шаблон проектирования, который загружает модули по мере их необходимости. Ленивая загрузка позволяет уменьшить размер начального пакета, что, в свою очередь, уменьшает время начальной загрузки.По умолчанию Angular eager

Вот пример проекта, использующего ленивую загрузку:

Angular Example - Lazy Loading Feature Modules - StackBlitz

Здесь свойство loadChildren указывает, что при переходе браузера на определенный URL-адрес необходимо получить соответствующий пучок модулей, назначенный ему. Как только модуль будет загружен, маршрутизатор получит конфигурацию из forChild и объединит ее с основной конфигурацией маршрутизатора.

Здесь OrdersRoutingModule лениво загружается, когда браузер переходит на URL "orders". Затем он использует метод forChild, чтобы указать, какой компонент будет отображаться, когда путь маршрута представляет собой пустую строку ''. Причина пустой строки в том, что маршрут forChild является относительным для этого модуля.

Посмотрите на мой фреймворк с открытым исходным кодом QQ:

https://github.com/jsmuster/qq

Её статьи

• Angular Injector За 5 Минут
• Поиск хорошего JavaScript разработчика - вопросы на собеседовании
• Оптимизация следующей большой вещи в JavaScript

Пожалуйста, дайте статье немного 👏 и поделитесь ею!

Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter , LinkedIn , YouTube , и Discord .

Заинтересованы в масштабировании вашего программного стартапа? Посмотрите Circuit.