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

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

От автора: продолжаем изучать, как работает в Angular роутинг. Роутер Angular – очень мощный инструмент, позволяющий делать все, что связано с роутингом. С его помощью можно: обрабатывать базовый роутинг, защищать роуты с помощью guard, лениво загружать приложение, и многое другое.

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

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

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

Снимок: роутер позволяет делать снимок текущего роута

Observable/Stream: Angular активно использует Observables, а значит, роутер возвращает Observables, который мы можем поджидать

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Поговорим об этих способах более подробно немного позже.

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

Давайте разберем простой пример. Мы создадим роут с параметрами.

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

<!-- 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 в классе компонента.

<a [routerLink]="['/users', username]">{{ username }} Profile</a>

Мы создали ссылки. Теперь можно перейти к получению параметров роута в UserComponent.

Получение параметров роута (снимок)

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
// 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().

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, который мы можем использовать. Синтаксис использования:

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.

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

Источник: https://scotch.io/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree