我的 Angular 項(xiàng)目有問(wèn)題。我無(wú)法僅獲取菜單的一個(gè)組件并將其放在導(dǎo)航上以顯示單擊了哪個(gè)菜單。這是我的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 回答
阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
如何添加點(diǎn)擊事件并在導(dǎo)航欄中對(duì)其做出反應(yīng)：
<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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊
在 html 文件上添加點(diǎn)擊事件（...是代碼的一部分）
<a ... (click)="handleMenuClick(menuitem)"></a>
在你的頭ts文件中添加方法
handleMenuClick (item) {
alert(item.name)
}
因此，在該函數(shù)內(nèi)部獲取值，并執(zhí)行任何所需的任務(wù)以根據(jù)所選項(xiàng)目更改 UI，我剛剛添加了警報(bào)以顯示當(dāng)前項(xiàng)目
躍然一笑
TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊
將 menuItemClick 方法添加到您的 menuItem 類中，此方法應(yīng)將單擊的項(xiàng)目作為參數(shù)，然后處理 html 中的項(xiàng)目單擊事件
類似的東西
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 關(guān)注
- 200 瀏覽
添加回答
舉報(bào)
0/150
提交
取消