Angular роутинг — обробка route параметрів у версії v2+

14

Від автора: продовжуємо вивчати, як працює в Angular роутинг. Роутер Angular – дуже потужний інструмент, що дозволяє робити все, що пов’язано з роутингом. З його допомогою можна обробляти базовий роутинг, захищати роуты з допомогою guard, ліниво завантажувати додаток, і багато іншого.

Одна з найбільш стандартних завдань роутера – створювати роуты з параметрами. Наприклад, на сайті Scotch посилання на профіль користувача виглядають так https://scotch.io/@chris. Chris – це динамічний параметр роута.

2 способи отримання параметрів роута

Роутер дозволяє витягувати параметри роута різними способами. Обговоримо обидва способи і поговоримо про їх переваги та недоліки:

Знімок: роутер дозволяє робити знімок поточного роута

Вами/Stream: Angular активно використовує Observables, а значить, роутер повертає Observables, який ми можемо чекати

Поговоримо про ці способи більш докладно трохи пізніше.

Створення роутов з параметрами

Давайте розглянемо простий приклад. Ми створимо рауса з параметрами.

// 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. Код нижче робить те ж саме.

Home
Home
Home

Так як у роута немає параметрів, то можна перейти до першого варіанту. Другий спосіб можна використовувати в тому випадку, якщо ви хочете використовувати призначення властивостей в квадратних дужках. Так легше розпізнати директиву Angular. Третій спосіб зручний, коли в роуте є параметри.

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

Ось так можна посилатися на профілі користувачів. У сценарії нижче у нас є змінна username в класі компонента.

{{ username }} Profile

Ми створили посилання. Тепер можна перейти до отримання параметрів роута в UserComponent.

Отримання параметрів роута (знімок)

Давайте подивимося, як з допомогою знімка можна отримати параметри роута. В роутері Angular є ActivatedRoute, його можна вставити в наші класи. Це буде основний інструмент для отримання параметрів роута.

Базова настройка UserComponent.

// user.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;
@Component({
selector: ‘app-user’,
template: `

This is {{ username }}’s profile!

`
})
export class UserComponent implements OnInit {
username: string;
// inject the route activatated
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// this is where we’ll grab data
}
}

Ми вставимо ActivatedRoute в цей компонент через конструктор. Далі з допомогою ActivatedRoute ми витягнемо username параметр роута в ngOnInit().

ngOnInit() {
// this is where we’ll grab data
// grab using the method snapshot
this.username = this.route.snapshot.params.username;
}

Для отримання username більше нічого не потрібно! Давайте розберемо наступний спосіб отримання параметрів роута, а також дізнаємося, чому другий метод краще.

Продуктивність роутов Angular

Angular всіма силами намагається підтримувати максимальну продуктивність програми. Один із способів – повторне використання компонентів по максимуму. Angular не обов’язково знищувати і створювати компоненти заново, він може просто перемикатися між даними.

«Angular повторно використовує компоненти для підвищення продуктивності»

Сценарій для якого не підходить знімок – ми знаходимося на сторінці одного профілю і переходимо по посиланню на інший. Знімок запускається лише раз при ініціалізації компонента. При переміщенні з /users/chris в /users/nick компонент не оновлюється.

Якщо ви не будете повторно використовувати один компонент, можете використовувати знімок. В інших випадках нам знадобиться спосіб вами.

Отримання параметрів роута (вами)

Вами по своїй натурі представляють потік подій. Тобто коли ми переходимо від профілю до проофилю, разом з новими даними буде передаватися вами.

В роутері Angular v4+ є ParamMap – Вами, який ми можемо використовувати. Синтаксис використання:

ngOnInit() {
// subscribe to the parameters вами
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.

ngOnInit() {
// subscribe to the parameters вами
this.route.params.subscribe(params => {
console.log(params.username);
this.username = params.username;
});
}

Всього пара додаткових рядків коду роблять так, що компонент буде дивитися за змінами роута і завжди оновлювати username.

Висновок

Роутер Angular спрощує роботу з параметрами роутов. Зважте доступні варіанти і вирішіть, який підходить вам більше (знімок або Вами). Зазвичай краще покластися на Вами, щоб уникнути проблем у майбутньому з повторним використанням компонента.