Использование ActivatedRoute для извлечения параметров маршрута в Angular

В Angular приложениях маршрутные параметры необходимы для передачи информации между различными компонентами. Корректным вариантом использования сервиса для извлечения параметров маршрута внутри компонента будет ActivatedRoute.

Основы работы с ActivatedRoute

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

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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.productId = this.route.snapshot.paramMap.get('id');
    // затем используйте productId для загрузки данных о товаре
  }
}

В приведенном выше примере 'id' - это параметр маршрута, который мы хотим извлечь.

Вывод

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