Angular PrimeNG菜单弹出模式

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。本文将告诉我们如何在Angular PrimeNG中使用菜单弹出模式。

菜单弹出模式可用于以弹出方式显示菜单。默认情况下，菜单是内嵌式的，但是弹出模式可以通过启用弹出属性和调用切换函数，并通过锚点元素传递的事件来使用。

语法:

<p-menu #menu [popup]="true" 
    [model]="items">
</p-menu>

<button type="button" pButton 
    icon="..." label="..." 
    (click)="menu.toggle($event)">
</button>

Angular PrimeNG菜单弹出模式属性：

• [popup]。它决定菜单是否应该以弹出方式显示。它的默认值是false。
• [model]。它是一个菜单项的数组。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成安装后，它将看起来像如下。

Project Structure

• 运行以下命令。

ng serve --open

例子1：下面是说明使用_Angular PrimeNG菜单弹出模式的例子。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Menu Popup Mode</h5>
<p-menu #menu [popup]="true" 
        [model]="items">
</p-menu>
<button type="button" 
        pButton label="GfG Courses" 
        (click)="menu.toggle($event)"> 
</button>

import { Component } from "@angular/core";
import { MenuItem, MessageService, PrimeNGConfig } 
 from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  items: MenuItem[];
  
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  
    this.items = [
      {
        label: "GeeksforGeeks Courses",
        items: [
          {
            label: "Data Structure - Self Paced",
            icon: "pi pi-code",
          },
          {
            label: "Complete Interview Preparation",
            icon: "pi pi-globe",
          },
        ],
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { MenuModule } from "primeng/menu";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
              MenuModule, 
              ButtonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

例子2：下面是另一个例子，说明了使用按钮类和图标的Angular PrimeNG菜单弹出模式的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Menu Popup Mode</h5>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
<button type="button" 
        pButton icon="pi pi-tags" 
        label="GfG Tutorials" 
        (click)="menu.toggle($event)" 
        class="p-button-outlined p-button-danger">
</button>

import { Component } from "@angular/core";
import { MenuItem, MessageService, PrimeNGConfig } 
  from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  items: MenuItem[];
  
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  
    this.items = [
      {
        label: "GeeksforGeeks Tutorials",
        items: [
          {
            label: "Algorithms",
            icon: "pi pi-code",
          },
          {
            label: "Gate Tutorials",
            icon: "pi pi-book",
          },
          {
            label: "Database Tutorials",
            icon: "pi pi-database",
          },
        ],
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { MenuModule } from "primeng/menu";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
              MenuModule, 
              ButtonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出: