Изображение, показанное выше, содержит много изгибов и поворотов по сравнению с Упрощенная угловая маршрутизация - Часть 1 ». Так и должно быть, поэтому это Часть 2.

В Части 1 мы рассмотрели основные концепции маршрутизации с помощью простого руководства по настройке маршрутов в приложении Angular. В этом уроке мы рассмотрим:

  • Настройка дочерних маршрутов
  • Активированные маршруты

Хорошо, давайте начнем с них по очереди :)

Настройка дочерних маршрутов

Давайте сегодня отправимся в путешествие из Индии в США, чтобы понять детские маршруты, и, благодаря нашей планете, она круглая :) Итак, у нас есть два варианта:

  • Через Атлантику
  • Через Тихий океан

Здесь мы называем родительский путь, который нам нужно покрыть путем «Индия-США», и варианты, которые у нас есть при покрытии этого пути, - это « дочерние маршруты ».

Давайте превратим эти мысли в код:

  • Нам нужно создать родительский компонентIndia-USA с двумя функциями viaAtlantic() и viaPacific().
  • Нам нужно создать два дочерних компонента Atlantic и Pacific.
  • Нам нужно настроить наши компоненты, сообщив Angular, что компоненты Atlantic и Pacific являются дочерними маршрутами India-USA родительского маршрута.

Создание компонента Индия-США

  1. Файл india-usa.component.html должен содержать две кнопки, которые помогут нам добраться до США: viaAtlantic и viaPacific.

Если мы нажмем viaAtlantic, будет вызвана функция viaAtlantic() из india-usa.component.ts, которая перенаправит нас на путь atlantic, как показано с кодом:

Здесь необходимо сосредоточить внимание на следующих важных моментах:

  • Нам нужно импортировать модули ActivatedRoute и Router из @angular/router.
  • Объект {relativeTo: this.router} гарантирует, что путь остается относительно его родительского пути. Итак, в этом случае пути должны быть india-usa/atlantic и india-usa/pacific.

2. Теперь наш следующий шаг - создать компоненты Atlantic и Pacific, чтобы они могли визуализировать вместо router-outlet. Создать их - самая простая задача :)

Создание Атлантического компонента

Создание Тихоокеанского компонента

3. Наконец, нам нужно настроить наше приложение Angular так, чтобы Atlantic и Pacific были дочерними маршрутами для India-USA. Мы делаем это, объявляя children[] и определяя путь и компоненты внутри него.

И вот результат :)

Теперь наш путь установлен, и мы готовы отправиться в США. Давайте узнаем больше о плоскости: p

Параметризованные маршруты

Путешествовать на самолете всегда интересно, и, поскольку я гурман, меня больше волнует еда, чем путешествие: p

Теперь у путешествующих через Атлантический и Тихий океан списки меню разные. Также каждый список меню на экране содержит идентификаторы меню для упорядочивания элементов. Как и в этой таблице:

Нам нужно указать правильный путь вместе с идентификатором заказа, чтобы получить правильную еду. Например: указание id = 3 как india-usa/atlantic/3 предоставит Vegetarian Meal.

Давайте превратим это в код:

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

Как вы можете видеть, функции, показанные ниже, перемещаются по пути в соответствии с идентификатором, переданным в URL-адресе, вам необходимо передать параметризованные id внутри массива в методе route.navigate .

Совет: если вы планируете добавить больше параметризованных идентификаторов, вы можете продолжать добавлять их внутри массива и соответствующим образом изменять массив маршрутов в app.module.ts

pacificMenu(id){
  this.route.navigate(['pacific', id], { relativeTo: this.router});
}
// india-usa.component.ts

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

Теперь, если мы бронируем обед Lacto в PacificMenu, у нас есть путь localhost:4200/india-usa/pacific/2, но нам также нужно напечатать идентификатор еды на экране, что означает, что нам нужно извлечь идентификатор еды из URL-адреса. .

После указания пути localhost:4200/india-usa/pacific/2 мы собираемся визуализировать компонент меню, показывая нам зарезервированный идентификатор меню.

Создание компонента меню

Подобно компонентам Atlantic и Pacific, мы создадим компонент меню.

После создания компонента меню мы будем использовать модуль ActivatedRoute для получения selected id из URL-адреса, модуль ActivatedRoute содержит метод paramMap, который возвращает Observable.. Как видно, при изменении идентификатора URL-адреса angular обновляет привязку в представлении.

ActivatedRoute содержит информацию о маршруте, связанном с компонентом, загруженным в розетку.

Здесь следует отметить несколько важных моментов:

  • Оператор +, используемый в (params.get('id')) для изменения строкового идентификатора, полученного из URL, на числовой идентификатор.
  • Как только URL-адрес обновляется новым идентификатором, (params.get('id')) изменяется, и, следовательно, значениеselected, привязанное к шаблону, изменяется.

Наконец-то наш путь в США определен, и мы забронировали еду в самолете :)

Надеюсь, этот новый способ визуализации маршрутизации поможет вам лучше его запомнить. Маршрутизация - это весело, вам просто нужно один раз попрактиковаться :)

Для получения полного кода проверьте:



aayusharora / Angular-Routing-Part-2
Участвуйте в разработке Angular-Routing-Part-2, создав учетную запись на GitHub. github.com



Удачного путешествия: p

Если вам понравилась статья, пожалуйста, хлопните в ладоши. Совет. Ваши 50 хлопков сделают мой день лучше!

Пожалуйста, поделитесь также в Fb и Twitter. Если вы хотите получать обновления, подписывайтесь на меня в Twitter и Medium. Если что-то неясно или вы хотите что-то указать, прокомментируйте ниже.