Что такое активированный маршрут?

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

Основные понятия

1. Что такое маршрутизация в Angular?

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

2. Что такое ActivatedRoute?

ActivatedRoute — это класс из пакета @angular/router, который содержит информацию о маршруте, который активен в данный момент. Вы можете получить к нему доступ в любом компоненте, подключив его через DI (инъекцию зависимостей).

Как использовать ActivatedRoute?

Шаг 1: Импортировать ActivatedRoute

Сначала вам нужно импортировать ActivatedRoute в ваш компонент:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
  private id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Получение параметра ID из маршрута
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id') || 'Нет ID';
      console.log(`Полученный ID: ${this.id}`);
    });
  }
}

Шаг 2: Определите маршруты

Теперь давайте определим маршруты в вашем app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ExampleComponent } from './example/example.component';

const routes: Routes = [
  { path: 'example/:id', component: ExampleComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В этом примере мы определили маршрут, который принимает параметр id. Когда пользователь переходит по этому маршруту, ExampleComponent будет загружен, и мы сможем получить значение id.

Шаг 3: Использовать параметры запроса

Вы также можете получать параметры запроса, используя queryParamMap:

this.route.queryParamMap.subscribe(queryParams => {
  const filter = queryParams.get('filter') || 'Нет фильтра';
  console.log(`Полученный фильтр: ${filter}`);
});

Ниже приведен пример URL с параметрами запроса: http://example.com/example/1?filter=active. В данном случае 1 будет значением id, а active будет значением filter.

Заключение

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