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

Что мы изучаем?

  • Отображение и скрытие компонентов с использованием маршрутов, а не свойств ввода и вывода
  • Поддерживайте связь этих компонентов друг с другом, передавая данные по маршруту.
  • Узнайте, как настроить маршруты в модуле маршрутизации
  • Используйте routerLink для настройки событий щелчка и передачи данных в маршрут

В другом руководстве, которое я недавно опубликовал, я рассмотрел использование свойств ввода и вывода для передачи данных в ваше приложение Angular. Мы также использовали эти свойства для управления тем, что пользователь мог видеть в пользовательском интерфейсе. Эта установка определенно сработала и является отличным способом получить необходимые данные для дочерних компонентов, но это не очень удобно. У нас есть материалы, разбросанные повсюду, и они немного повторяются.

Например, это app.component.html в том проекте:

У нас здесь много логики, которой управляет компонент приложения, и он берет на себя работу по направлению трафика. У нас также есть проблема, связанная с необходимостью передавать данные в компонент приложения из all-habits, чтобы мы могли передать их обратно в компонент habit-form. Компоненту приложения вообще не нужно заботиться об этих данных!

Чем маршрутизация в SPA отличается от маршрутизации в HTML?

В SPA вы обслуживаете весь свой контент и данные на одной странице. Приложение просто показывает разные HTML, CSS и JS в зависимости от состояния приложения. Данные могут быть отправлены туда и обратно между запущенным приложением и сервером без необходимости перезагружать страницу, поэтому нет необходимости ждать возврата ресурсов при выполнении простых обновлений. Фактически, это то, как выглядит точка входа для всего кода в вашем приложении, которая появляется в index.html:

<body>
    <app-root></app-root>
</body>

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

Когда удобна маршрутизация?

  • Если вам нужна новая страница. Вы можете подумать об этом через призму классических страниц, не относящихся к SPA. Новый маршрут должен направить вас к совершенно новому виду в приложении. Если цель новой функции будет заключаться в том, чтобы скрыть остальную часть приложения и отобразить новый, автономный интерфейс, рассмотрите возможность маршрутизации как средство визуализации нового контента.
  • Когда вам нужно отобразить контент для элементов в списке. Параметры маршрута позволяют легко открывать такие функции, как детализация или редактирование страниц, путем передачи идентификатора или индекса в маршруте.
  • Когда вам нужно управлять разрешениями ролей. Эта тема выходит за рамки данного руководства, но защита маршрута Angular обычно используется, когда вы хотите убедиться, что пользователи, соответствующие определенным критериям, не могут получить доступ к контенту, отображаемому с помощью маршрут. Новый маршрут может инкапсулировать страницу, содержащую конфиденциальную информацию, и перенаправлять неавторизованных пользователей.

Настраивать

Среда разработки

  • Если вы работали с приложением Angular на своем компьютере, убедитесь, что у вас установлены Node.js и Angular CLI.
  • Я покажу, как загрузить стартовые файлы с помощью Git, который также потребует установки, если вы никогда не использовали его раньше.

Стартовые файлы

Чтобы получить стартовый проект, снимите его с этого репозитория GitHub. Для этого из командной строки перейдите в папку, в которую вы хотите загрузить приложение, и введите следующую команду Git:

git clone https://github.com/jessipearcy/basic-routing-start.git

Это скопирует файлы в папку. Затем выполните следующие две команды, чтобы перейти к папке и установить необходимые пакеты для запуска приложения Angular:

cd basic-routing-start
npm ci

После завершения установки всех пакетов введите ng serve в командную строку, нажмите клавишу ВВОД, а затем перейдите к http://localhost:4200, и вы должны увидеть работающее приложение.

Начните с угловой маршрутизации

Наше приложение сейчас строится, но это не очень интересно. У нас еще нет настроенных маршрутов!

Откройте app-routing.module.ts. Вы заметите, что по умолчанию Angular устанавливает для свойства routes пустой массив:

const routes: Routes = [];

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

const routes: Routes = [
  { path: '', component: AllHabitsComponent }
];

Этот объект сообщает приложению, что при рендеринге нашего базового URL (для этого тестового приложения это будет http://localhost:4200/) отобразить AllHabitsComponent. Не забудьте добавить импорт для компонента.

Затем нам нужно указать Angular, куда поместить контент, который он будет обслуживать из маршрута. В app.component.html добавьте следующий элемент после панели инструментов:

<router-outlet></router-outlet>

Идеально! Теперь у нас есть контент, с которым можно поработать.

Маршрутизация к форме

Чтобы подключить нашу страницу и добавить новые привычки, нам нужно узнать о свойстве Angular routerLink. Добавление этого свойства к элементу заставляет его действовать почти как тег <a> и направлять вас в указанное место.

Во-первых, давайте добавим новый маршрут для использования на кнопке. Перейдите к app-routing.module.ts и добавьте еще один объект пути в массив routes:

const routes: Routes = [
    { path: 'habit-form', component: HabitFormComponent },  
    { path: '', component: AllHabitsComponent },
];

Затем на кнопке Add New Habit добавьте routerLink sending нас к новому маршруту:

Сохраните все это и попробуйте нажать свою кнопку - теперь мы можем перейти к нашей форме! Если вы проверите URL-адрес в своем браузере, вы должны увидеть маршрут, который привел нас туда:

http://localhost:4200/habit-form

Переход от компонента

Часто с переходом от представления к представлению связана некоторая логика. В этих случаях вы можете перейти от функции в компоненте вместо использования routerLink. Давайте продемонстрируем использование встроенного в Angular класса Router.

Обновление habit-form.component.ts:

  • Импортировать Router из @angular/router.
  • Добавьте свойство маршрутизатора в конструктор класса.
  • Используйте функцию navigate() маршрутизатора для маршрутизации вашего приложения.

Теперь событие щелчка, связанное с нашей формой привычки, создаст новую привычку в массиве привычек и перенаправит пользователя обратно в основной список - и обратите внимание, что новая привычка была динамически добавлена ​​и отображается сразу после инициализации компонента all-habits.

Настройка параметра маршрута

Чтобы отредактировать один из элементов в нашем списке, мы можем передать индекс элемента в маршрут, а затем выбрать его в форме, чтобы обнаружить, что что-то редактируется. Это требует добавления нового маршрута. В app-routing.module.ts добавьте следующий маршрут, который включает параметр с именем id:

const routes: Routes = [
    { path: 'habit-form/:id', component: HabitFormComponent },
    { path: 'habit-form', component: HabitFormComponent },
    { path: '', component: AllHabitsComponent },
];

Примечание. Порядок важен! Более конкретные маршруты должны быть перечислены выше менее конкретных маршрутов. Если бы маршрут с параметром был указан вторым, приложение сначала направило бы его в форму привычки и никогда не получило бы идентификатор.

Затем мы добавим еще один атрибут routerLink в all-habits.component.html, и на этот раз мы передадим в маршрут значение индекса для habit, по которому кликают:

<mat-icon 
    class="habit-icon" 
    color="primary" 
    [routerLink]="['/habit-form', i]">edit
</mat-icon>

Несколько слов об этом:

  • В этом примере мы использовали квадратные скобки, поэтому текст, который мы передаем в двойных кавычках, будет оцениваться как выражение JavaScript. Квадратные скобки сделают это с любой привязкой Angular, и без них все, что находится между двойными кавычками, будет оцениваться как буквальная строка.
  • Переменная i, которую мы передаем, будет заполнять параметр :id нашего маршрута. Он соответствует индексу habit, который мы собираемся редактировать, и позволяет нам искать его в форме.

На этом этапе, если вы нажмете на значок редактирования, вы увидите, что маршрут заполняется индексом выбранной привычки. Но мы еще не заполняем нашу форму отредактированной привычкой - давайте исправим это!

Доступ к параметру маршрута

В habit-form.component.ts мы получим доступ к идентификатору, который отправляется в маршруте, с помощью класса ActivatedRoute Angular. Сделайте следующие обновления:

Изменения, которые следует отметить в этом фрагменте:

  • Мы используем ActivatedRoute свойство route, чтобы получить параметр из URL. Строка, которую мы передаем в get(), соответствует имени параметра, который мы определили в app-routing.module.ts.
  • Этот метод get() возвращает строку, поэтому мы используем оператор + в строке 21 для преобразования возвращаемой строки в число, которое мы можем сохранить и использовать в editingIndex.
  • Мы используем наличие параметра id, чтобы сообщить нам, находимся мы в режиме редактирования или нет.
  • Не забудьте установить editing обратно на false при выходе из формы, иначе вы можете столкнуться с неожиданным поведением!

Наконец, последний шаг - убедиться, что наша кнопка «Отмена» направляет нас, а не пытается отправить пустой habit. В habit-form.component.html обновите кнопку «Отмена», добавив пустой routerLink:

<button mat-raised-button routerLink="">Cancel</button>

Это вернет нас к основному списку.

Заключение

Хорошая работа! Теперь мы можем создавать, обновлять, читать и удалять привычки, используя маршрутизацию Angular. В этом уроке мы прошли через:

  • Настройка основных маршрутов в app-routing.module.ts
  • Передача данных в маршруте и через атрибут arouterLink в HTML
  • Переход к другому маршруту из функции в контроллере с использованием Angular Router и navigate()
  • Доступ к данным параметра маршрута с помощью ActivatedRoute и paramMap

Спасибо, что прошли через все это вместе со мной - надеюсь, вы узнали что-то новое!

Ресурсы

Больше руководств по Angular



Входы и выходы: работа с угловыми компонентами
Научитесь использовать свойства ввода и события вывода для управления родительскими и дочерними компонентами medium.com





Изучите основы Angular, создав простое приложение с использованием материала Angular
Бонус: включает краткий обзор использования реактивных форм Angular medium.com