在primeng p-menu中选择项目的编程方式可以通过以下步骤实现:
<p-menu [(ngModel)]="selectedItem">
<p-header>Menu</p-header>
<ul>
<li *ngFor="let item of menuItems" [label]="item.label" [icon]="item.icon" [routerLink]="item.routerLink"></li>
</ul>
</p-menu>
在上面的代码中,menuItems是一个数组,包含了菜单的各个项目。每个项目都有一个label用于显示菜单项的文本,一个icon用于显示菜单项的图标,以及一个routerLink用于导航到相应的路由。
import { Component } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent {
menuItems = [
{ label: 'Home', icon: 'pi pi-home', routerLink: '/home' },
{ label: 'About', icon: 'pi pi-info', routerLink: '/about' },
{ label: 'Contact', icon: 'pi pi-envelope', routerLink: '/contact' }
];
selectedItem: any;
}
在上面的代码中,menuItems数组包含了三个菜单项,分别是Home、About和Contact。selectedItem变量用于保存当前选中的项目。
通过以上步骤,你就可以以编程方式在primeng p-menu中选择项目了。当用户选择一个菜单项时,selectedItem变量会自动更新,你可以在组件中根据selectedItem的值来执行相应的操作。
领取专属 10元无门槛券
手把手带您无忧上云