В Angular имеется несколько способов получить информацию о том, на какой раздел меню был произведен клик. Вариант реализации будет зависеть от архитектуры вашего проекта и от того, как вы организуете маршрутизацию в приложении.
Один из способов получить информацию о разделе меню, на который был клик, это использовать параметры маршрута. Вы можете настроить маршруты вашего приложения и добавить дополнительные параметры к каждому маршруту, которые будут отражать разделы меню. Далее, в компоненте, соответствующем данному маршруту, вы сможете получить значение параметра и использовать его для определения текущего раздела меню.
Приведу пример, чтобы показать, как это можно сделать. Предположим, у вас есть следующая структура маршрутов:
const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home', component: HomeComponent, data: { menuSection: 'home' } }, { path: 'about', component: AboutComponent, data: { menuSection: 'about' } }, { path: 'products', component: ProductsComponent, data: { menuSection: 'products' } }, { path: 'contact', component: ContactComponent, data: { menuSection: 'contact' } }, { path: '**', redirectTo: '/home' } // Обработка несуществующих URL ];
Здесь у каждого маршрута есть дополнительное свойство data
, которое содержит информацию о разделе меню, связанном с данным маршрутом.
Затем, в компоненте, который соответствует каждому маршруту, вы можете получить значение параметра menuSection
, используя ActivatedRoute
из библиотеки @angular/router
. Например:
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-home', template: `...`, styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { menuSection: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.menuSection = this.route.snapshot.data.menuSection; } }
Теперь menuSection
будет содержать значение раздела меню для текущего маршрута. Вы можете использовать это значение для своих нужд в компоненте.
Заметьте, что данный подход предполагает использование статической маршрутизации, при которой маршруты определены в заранее известном виде. Если у вас динамическая маршрутизация, вам придется использовать другие методы для определения текущего раздела меню, например, на основе активных маршрутов.
Это лишь один из возможных способов решить задачу получения информации о разделе меню, на который был клик. В зависимости от архитектуры вашего проекта и требований, вы можете использовать и другие подходы.