Метод 1: использование службы ActivatedRoute
Служба ActivatedRoute предоставляет способ доступа к текущей информации о маршруте. Подписавшись на его наблюдаемые объекты paramsили queryParams, вы можете обнаружить изменения параметров маршрута или параметров запроса соответственно. Вот пример:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-my-component',
  template: '<p>Current Route: {{ currentRoute }}</p>'
})
export class MyComponent implements OnInit {
  currentRoute: string;
  constructor(private route: ActivatedRoute) { }
  ngOnInit() {
    this.route.params.subscribe(params => {
      // Update the currentRoute variable
      this.currentRoute = params['id'];
    });
  }
}

Метод 2: использование событий маршрутизатора
Angular Router генерирует различные события в течение жизненного цикла навигации. Вы можете подписаться на событие NavigationEnd, чтобы обнаруживать изменения маршрута и выполнять соответствующие действия. Вот пример:

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-my-component',
  template: '<p>Current Route: {{ currentRoute }}</p>'
})
export class MyComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // Update the currentRoute variable
        this.currentRoute = this.router.url;
      }
    });
  }
}

Метод 3: использование розетки маршрутизатора и ActivatedRouteData
Если вы используете <router-outlet>в своем приложении, вы можете получить доступ к данным текущего маршрута с помощью ActivatedRouteDataсвойство. Подписавшись на наблюдаемую data, вы сможете обнаруживать изменения маршрута и соответствующим образом обновлять свое приложение. Вот пример:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-my-component',
  template: '<p>Current Route: {{ currentRoute }}</p>'
})
export class MyComponent {
  currentRoute: string;
  constructor(private route: ActivatedRoute) {
    this.route.data.subscribe(data => {
      // Update the currentRoute variable
      this.currentRoute = data.title;
    });
  }
}

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

Не забудьте выбрать метод, который лучше всего соответствует вашим требованиям и архитектурному проекту. Приятного кодирования!