当我在 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() {}

}

Answer 1

如何添加点击事件并在导航栏中对其做出反应：&nbsp;<mat-nav-list>&nbsp; &nbsp; &nbsp; <mat-list-item>&nbsp; &nbsp; &nbsp; &nbsp; <a style="color: white;" *ngFor="let menuitem of menuItems.getMenuitem()" (click)="menuItemClick(menuitem)">{{ menuitem.name }}</a>&nbsp; &nbsp; &nbsp; </mat-list-item>&nbsp; &nbsp; &nbsp;</mat-nav-list>

Answer 2

在 html 文件上添加点击事件（...是代码的一部分）<a ... (click)="handleMenuClick(menuitem)"></a>在你的头ts文件中添加方法handleMenuClick (item) {&nbsp; &nbsp;alert(item.name)&nbsp;}因此，在该函数内部获取值，并执行任何所需的任务以根据所选项目更改 UI，我刚刚添加了警报以显示当前项目

Answer 3

将 menuItemClick 方法添加到您的 menuItem 类中，此方法应将单击的项目作为参数，然后处理 html 中的项目单击事件类似的东西export class MenuItems {&nbsp; getMenuitem(): Menu[] {&nbsp; &nbsp;return MENUITEMS;&nbsp; }&nbsp; menuItemClick(MenuItem: Menu){&nbsp; &nbsp;// Do something&nbsp;}}在你的html中&nbsp;<mat-nav-list>&nbsp; <mat-list-item>&nbsp; &nbsp; <a style="color: white;" *ngFor="let&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;menuitem of menuItems.getMenuitem()" (click)="menuItems.menueItemClick(menuitem)">{{ menuitem.name }}</a>&nbsp; </mat-list-item>&nbsp;</mat-nav-list>

Answer 4

您需要在控制器文件中定义该方法