[在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

Answer 2