Как получить текущий маршрут?

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

Шаг 1: Импортируйте необходимые модули

Для начала вам нужно импортировать ActivatedRoute из пакета @angular/router. Например, в вашем компоненте:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.getCurrentRoute();
  }

  getCurrentRoute(): void {
    console.log(this.route.snapshot.url);
  }
}

Шаг 2: Используйте ActivatedRoute в вашем компоненте

В приведённом выше коде мы создали компонент MyComponent и внедрили ActivatedRoute через конструктор. В методе ngOnInit мы вызываем функцию getCurrentRoute, которая будет выводить текущий маршрут в консоль.

Примечание

• this.route.snapshot.url возвращает массив объектов UrlSegment, представляющий текущий URL.
• Если вам нужно получать обновления маршрута в реальном времени (например, если вы ожидаете, что URL может изменяться без перезагрузки компонента), используйте this.route.url.subscribe(...).

Пример с подпиской

Вот как можно использовать подписку для получения актуальной информации о текущем маршруте:

ngOnInit(): void {
  this.route.url.subscribe(url => {
    console.log(url); // Каждый раз, когда URL меняется, будет выводиться новый маршрут
  });
}

Таким образом, получая доступ к ActivatedRoute, вы можете изменять поведение вашего приложения в зависимости от текущего маршрута. Это полезно для динамического отображения данных или изменения шаблонов.

Заключение

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