Как получить название меню в навигации при нажатии на него в Angular

Question

У меня проблема с моим Angular проектом. Я не могу получить только один компонент меню и поместить его в навигационную систему, чтобы показать, какое меню щелкнуло.

Это мой header.component.html

     <mat-nav-list>
      <mat-list-item>
        <a style="color: white;" *ngFor="let menuitem of menuItems.getMenuitem()">{{ menuitem.name }}</a>
      </mat-list-item>
     </mat-nav-list>

Это мой header.component.ts

import { MediaMatcher } from '@angular/cdk/layout';
import { Router } from '@angular/router';
import {
  ChangeDetectorRef,
  Component,
  NgZone,
  OnDestroy,
  ViewChild,
  HostListener,
  Directive,
  AfterViewInit
} from '@angular/core';
import { MenuItems } from '../../../shared/menu-items/menu-items';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: []
})

export class AppHeaderComponent implements OnDestroy, AfterViewInit {
  mobileQuery: MediaQueryList;

  private _mobileQueryListener: () => void;

  constructor(
    changeDetectorRef: ChangeDetectorRef,
    media: MediaMatcher,
    public menuItems: MenuItems
  ) {
    this.mobileQuery = media.matchMedia('(min-width: 768px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
  ngAfterViewInit() {}


}

Это мой menu-items.ts, когда я получаю названия меню

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


export interface BadgeItem {
  type: string;
  value: string;
}

export interface Menu {
  state: string;
  name: string;
  type: string;
  icon: string;
  badge?: BadgeItem[];
}

const MENUITEMS = [
  { state: 'home', type: 'link', name: 'HOME', icon: 'home' },
  { state: 'dashboard', name: 'DASHBOARD', type: 'link', icon: 'dashboard' },
  { state: 'organizzazioni', type: 'link', name: 'ORGANIZZAZIONI', icon: 'domain' },
  { state: 'registri', type: 'link', name: 'REGISTRI', icon: 'assignment' },
  {
    state: 'aprovazioni', type: 'link', name: 'APROVAZIONI', icon: 'view_headline', badge: [
      { type: 'red', value: '1' }]
  },
  { state: 'impatto', type: 'link', name: 'IMPATTO', icon: 'tab' },
  { state: 'informative', type: 'link', name: 'INFORMATIVE', icon: 'web' },
  { state: 'violazioni', type: 'link', name: 'VIOLAZIONI', icon: 'vertical_align_center' },
];

@Injectable()
export class MenuItems {
  getMenuitem(): Menu[] {
    return MENUITEMS;
  }
}

Чего мне не хватает?

Answer 1

Как насчет добавления события клика и реагирования на него в панели навигации:

 <mat-nav-list>
      <mat-list-item>
        <a style="color: white;" *ngFor="let menuitem of menuItems.getMenuitem()" (click)="menuItemClick(menuitem)">{{ menuitem.name }}</a>
      </mat-list-item>
     </mat-nav-list>

Answer 2

Добавить событие клика по файлу html (... Является частью вашего кода)

<a ... (click)="handleMenuClick(menuitem)"></a>

В вашем заголовочном файле добавить метод

handleMenuClick (item) { alert(item.name) }

Итак, внутри этой функции получаем значение и выполняем любую задачу по изменению интерфейса на основе этого выбранного элемента, я только что добавил предупреждение, чтобы показать текущий элемент

Answer 3

Добавьте метод menuItemClick к своему классу menuItem, и этот метод должен принять выбранный элемент в качестве параметра, а затем обработать событие щелчка элемента в вашем html

Что-то подобное

export class MenuItems {
  getMenuitem(): Menu[] {
   return MENUITEMS;
  }
  menuItemClick(MenuItem: Menu){
   // Do something
 }
}

И в вашем html

 <mat-nav-list>
  <mat-list-item>
    <a style="color: white;" *ngFor="let 
       menuitem of menuItems.getMenuitem()" (click)="menuItems.menueItemClick(menuitem)">{{ menuitem.name }}</a>
  </mat-list-item>
 </mat-nav-list>

Answer 4

Вы должны определить этот метод в файле вашего контроллера