我的 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.tsimport { 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() {}}
4 回答
阿波羅的戰車
TA貢獻1862條經驗 獲得超6個贊
如何添加點擊事件并在導航欄中對其做出反應：
<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>
慕尼黑8549860
TA貢獻1818條經驗 獲得超11個贊
在 html 文件上添加點擊事件（...是代碼的一部分）
<a ... (click)="handleMenuClick(menuitem)"></a>
在你的頭ts文件中添加方法
handleMenuClick (item) {
alert(item.name)
}
因此，在該函數內部獲取值，并執行任何所需的任務以根據所選項目更改 UI，我剛剛添加了警報以顯示當前項目
躍然一笑
TA貢獻1826條經驗 獲得超6個贊
將 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>
- 4 回答
- 0 關注
- 220 瀏覽
添加回答
舉報
0/150
提交
取消