Маршруты Angular на основе строки запроса

Вопрос или проблема

Маршруты Angular на основе строки запроса

/users -> UsersHome
/users?name=Foo -> UsersSearch

Ответ или решение

Для реализации маршрутизации в Angular с учетом параметров запроса, таких как путь /users и /users?name=Foo, необходимо правильно настроить маршруты в вашем приложении. В данном случае вы хотите отобразить компонент UsersHome для маршрута /users, а компонент UsersSearch для маршрута /users?name=Foo, причем вам нужно предотвратить использование маршрута /users/search?name=Foo.

Вот как вы можете это сделать:

1. Установка маршрутов в модуле маршрутизации: Начнем с создания маршрутов в вашем приложении Angular. В файле маршрутизации (app-routing.module.ts или аналогично) определим маршруты следующим образом:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersHomeComponent } from './users-home/users-home.component';
import { UsersSearchComponent } from './users-search/users-search.component';

const routes: Routes = [
  { path: 'users', component: UsersHomeComponent }, // Маршрут для /users
  { path: 'users', component: UsersSearchComponent, canActivate: [UsersSearchGuard] }, // Маршрут для /users?name=Foo
  // Дополнительные маршруты при необходимости
];

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

1. Создание охранника маршрутов (Guard): Чтобы предотвратить использование маршрута /users/search?name=Foo, мы можем создать охранник маршрутов (Guard), который будет проверять наличие параметров запроса. Если параметр name присутствует, перенаправим пользователя на компонент UsersSearch, иначе на UsersHome.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class UsersSearchGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const name = route.queryParams['name'];

    if (name) {
      return true; // Параметр есть, переход на UsersSearch
    } else {
      this.router.navigate(['/users']); // Перенаправление на UsersHome
      return false; // Блокируем доступ к UsersSearch
    }
  }
}

1. Настройка компонентов: Теперь создайте компоненты UsersHomeComponent и UsersSearchComponent, которые будут использоваться для отображения соответствующего контента.

import { Component } from '@angular/core';

@Component({
  selector: 'app-users-home',
  template: `<h1>Добро пожаловать в раздел пользователей</h1>`,
})
export class UsersHomeComponent { }

@Component({
  selector: 'app-users-search',
  template: `<h1>Результаты поиска для: {{ name }}</h1>`,
})
export class UsersSearchComponent {
  name: string | null;

  constructor(private route: ActivatedRoute) {
    this.name = this.route.snapshot.queryParamMap.get('name'); // Получаем параметр name
  }
}

1. Обновление маршрутов: Убедитесь, что ваши маршруты настроены так, чтобы не было конфликтов. При наличии параметров, используйте Guards, чтобы гарантировать, что пользователи будут направлены в нужные компоненты.

2. Тестирование: Проверьте, чтобы /users перенаправлял на UsersHomeComponent, а /users?name=Foo отображал UsersSearchComponent. Убедитесь, что любые попытки доступа к /users/search?name=Foo будут перенаправляться на UsersHome.

Эти шаги позволят вам корректно настроить маршруты в Angular с учетом параметров запроса и предотвратят несанкционированные маршруты.