От автора: продолжаем изучать, как работает в Angular роутинг. Роутер Angular – очень мощный инструмент, позволяющий делать все, что связано с роутингом. С его помощью можно: обрабатывать базовый роутинг, защищать роуты с помощью guard, лениво загружать приложение, и многое другое.
Одна из наиболее стандартных задач роутера – создавать роуты с параметрами. Например, на сайте Scotch ссылки на профиль пользователя выглядят так //scotch.io/@chris. Chris – это динамический параметр роута.
2 способа получения параметров роута
Роутер позволяет вытягивать параметры роута разными способами. Обсудим оба способа и поговорим об их преимуществах и недостатках:
Снимок: роутер позволяет делать снимок текущего роута
Observable/Stream: Angular активно использует Observables, а значит, роутер возвращает Observables, который мы можем поджидать
Поговорим об этих способах более подробно немного позже.
Создание роутов с параметрами
Давайте разберем простой пример. Мы создадим роут с параметрами.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// app-routing.module.ts const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'users/:username', component: UserComponent } ]; |
Обратите внимание: это код из AppRoutingModule, который Angular CLI создает по умолчанию при запуске команды ng new my-app –routing. Параметр создается через синтаксис двоеточия. У нашего роута есть параметр :username.
Ссылки на роуты с параметрами
Нам необходимо создать роуты на обе секции. Ниже представлено несколько способов, как можно сослаться на домашнюю страницу. В Angular роутере есть директива RouterLink. Код ниже делает то же самое.
|
1 2 3 4 5 6 7 8 |
<!-- basic routerLink --> <a routerLink="/">Home</a> <!-- using the property binding with a string --> <a [routerLink]="'/'">Home</a> <!-- using the directive with a full array passed in --> <a [routerLink]="['/']">Home</a> |
Так как у роута нет параметров, то можно перейти к первому варианту. Второй способ можно использовать в том случае, если вы хотите использовать назначения свойств в квадратных скобках. Так легче распознать директиву Angular. Третий способ удобен, когда в роуте есть параметры.
Ссылка на страницу профиля с помощью параметров роута
Вот так можно ссылаться на профили пользователей. В сценарии ниже у нас есть переменная username в классе компонента.
|
1 |
<a [routerLink]="['/users', username]">{{ username }} Profile</a> |
Мы создали ссылки. Теперь можно перейти к получению параметров роута в UserComponent.
Получение параметров роута (снимок)
Давайте посмотрим, как с помощью снимка можно получить параметры роута. В роутере Angular есть ActivatedRoute, его можно вставить в наши классы. Это будет основной инструмент для получения параметров роута.
Базовая настройка UserComponent.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// user.component.ts import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user', template: `<h1>This is {{ username }}'s profile!</h1>` }) export class UserComponent implements OnInit { username: string; // inject the activatated route constructor(private route: ActivatedRoute) {} ngOnInit() { // this is where we'll grab data } } |
Мы вставим ActivatedRoute в этот компонент через конструктор. Далее с помощью ActivatedRoute мы вытянем username параметр роута в ngOnInit().
|
1 2 3 4 5 |
ngOnInit() { // this is where we'll grab data // grab using the snapshot method this.username = this.route.snapshot.params.username; } |
Для получения username больше ничего не нужно! Давайте разберем следующий способ получения параметров роута, а также узнаем, почему второй метод лучше.
Производительность роутов Angular
Angular всеми силами старается поддерживать максимальную производительность приложения. Один из способов – повторное использование компонентов по максимуму. Angular не обязательно уничтожать и создавать компоненты заново, он может просто переключаться между данными.
«Angular повторно использует компоненты для повышения производительности»
Сценарий для которого не подходит снимок – мы находимся на странице одного профиля и переходим по ссылке на другой. Снимок запускается лишь раз при инициализации компонента. При перемещении из /users/chris в /users/nick компонент не обновляется.
Если вы не будете повторно использовать один компонент, можете использовать снимок. В остальных случаях нам понадобится способ на observable.
Получение параметров роута (observable)
Observable по своей натуре представляют поток событий. То есть когда мы переходим от профиля к проофилю, вместе с новыми данными будет передаваться observable.
В роутере Angular v4+ есть ParamMap – Observable, который мы можем использовать. Синтаксис использования:
|
1 2 3 4 5 6 7 |
ngOnInit() { // subscribe to the parameters observable this.route.paramMap.subscribe(params => { console.log(params.get('username')); this.username = params.get('username'); }); } |
Теперь всегда при клике на новый профиль, вы увидите, как console.log() обновляет username из роута. Обратите внимание: роутер Angular сам обработает отписку от ParamMap.
Angular v2
paramMap – одно из нововведений. Если вы работаете с Angular v2, а не v4+, то получать параметры роута можно с помощью params, а не paramMap.
|
1 2 3 4 5 6 7 |
ngOnInit() { // subscribe to the parameters observable this.route.params.subscribe(params => { console.log(params.username); this.username = params.username; }); } |
Всего пара дополнительных строк кода делают так, что компонент будет смотреть за изменениями роута и всегда обновлять username.
Заключение
Роутер Angular упрощает работу с параметрами роутов. Взвесьте доступные варианты и решите, какой подходит вам больше (снимок или Observable). Обычно лучше положиться на Observable, чтобы избежать проблем в будущем с повторным использованием компонента.
Автор: Chris Sevilleja
Источник: //scotch.io/
Редакция: Команда webformyself.
