Пользовательский маршрут Angular

На чтение 3 мин Опубликовано 19.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаги для реализации
Заключение

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

У меня есть приложение с выпадающим списком, в котором для каждого выбора отображается список элементов. Я хочу, чтобы при выборе пользователем значения для каждого выбора был уникальный URL. Например, если пользователь выберет, скажем, Опцию A, URL изменится на

mysite.com/option-a

и так далее для каждого выбора.

Я стремлюсь к тому, чтобы пользователи могли делиться уникальным URL, то есть для URL mysite.com/option-e список будет отображаться при переходе по этому URL.

Я подумывал о том, чтобы использовать дочерние маршруты (например, добавить еще один router-outlet, когда пользователь выбирает значение из выпадающего списка), но интересно, есть ли более простой способ это сделать?

Спасибо

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

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

Шаги для реализации

Создание маршрутов: Вам нужно определить маршруты в вашем модуле маршрутизации (обычно это app-routing.module.ts). Например, если у вас есть три опции: option-a, option-b, и option-c, вы можете создать маршруты следующим образом:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ItemListComponent } from './item-list/item-list.component';

const routes: Routes = [
 { path: 'option-a', component: ItemListComponent },
 { path: 'option-b', component: ItemListComponent },
 { path: 'option-c', component: ItemListComponent },
 { path: '', redirectTo: '/option-a', pathMatch: 'full' }, // Редирект на опцию по умолчанию
 { path: '**', redirectTo: '/option-a' } // Обработка неверных путей
];

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

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

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

@Component({
 selector: 'app-dropdown',
 template: `
   <select (change)="onSelect($event)">
     <option value="option-a">Option A</option>
     <option value="option-b">Option B</option>
     <option value="option-c">Option C</option>
   </select>
 `
})
export class DropdownComponent {
 constructor(private router: Router) {}

 onSelect(event: Event) {
   const selectedValue = (event.target as HTMLSelectElement).value;
   this.router.navigate([selectedValue]);
 }
}

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

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

@Component({
 selector: 'app-item-list',
 template: `
   <h1>Список элементов для {{ selectedOption }}</h1>
   <ul>
     <li *ngFor="let item of items">{{ item }}</li>
   </ul>
 `
})
export class ItemListComponent implements OnInit {
 selectedOption: string;
 items: string[];

 private itemData = {
   'option-a': ['Item A1', 'Item A2', 'Item A3'],
   'option-b': ['Item B1', 'Item B2'],
   'option-c': ['Item C1', 'Item C2', 'Item C3', 'Item C4'],
 };

 constructor(private route: ActivatedRoute) {}

 ngOnInit() {
   this.route.url.subscribe(url => {
     this.selectedOption = url[0].path;
     this.items = this.itemData[this.selectedOption] || [];
   });
 }
}

Заключение

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