要动态添加菜单项,您可以使用Angular 8和PrimeNG PanelMenu组件。以下是一个示例解决方案:
npm install @angular/cli
ng new dynamic-menu-demo
cd dynamic-menu-demo
ng add primeNG
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PanelMenuModule } from 'primeng/panelmenu';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PanelMenuModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
interface MenuItem {
label: string;
icon?: string;
items?: MenuItem[];
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
menuItems: MenuItem[];
constructor() {
this.menuItems = [
{
label: 'Home',
icon: 'pi pi-home'
},
{
label: 'Components',
icon: 'pi pi-th-large',
items: [
{
label: 'Button',
icon: 'pi pi-check'
},
{
label: 'Input',
icon: 'pi pi-check'
}
]
}
];
}
addMenuItem() {
const newMenuItem: MenuItem = {
label: 'New Menu Item',
icon: 'pi pi-check'
};
this.menuItems.push(newMenuItem);
}
}
Dynamic Menu Demo
这就是使用Angular 8和PrimeNG PanelMenu动态添加菜单项的解决方案。您可以根据自己的需要进行修改和扩展。