当我单击导航时如何获取名称菜单。项目位于Angular

Question

我的角度项目有问题。我不能只获得菜单的一个组件并将其放到导航栏上以显示单击了哪个菜单。我必须得到som的答案，因为即时通讯没有找到问题所在。

这是我的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>