PrimeNG弹窗菜单点击按钮无响应问题排查求助

我在网站中设置了一个按钮，点击该按钮本应触发PrimeNG弹窗菜单展开，后续计划单独修改该按钮样式，但目前点击按钮后毫无反应。不过移除按钮后菜单可正常显示，请问这是什么原因？

app.component.html #

<div class = "background">
    <div id = pLogo>
      <img src = "../assets/logo-dark.svg" width="30%" height="30%" alt="P">
    </div>
    <div id = BurgerMenu>
      <p-menu #menu [model]="items" [popup]="true" />
      <p-button (onClick)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>
    </div>
</div>

app.component.css #

:host ::ng-deep .p-button { 
    background-color: #00a19c;
    border-color: #00a19c;
    font-family: "Museo Sans 900", Arial, sans-serif !important;
    font-size: 1.5vw;
}

:host ::ng-deep .p-button:hover { 
    background-color: #00928d;
    border-color: #00928d;
    font-family: "Museo Sans 900", Arial, sans-serif !important;
    font-size: 1.5vw;
}

app.component.ts #

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonModule } from 'primeng/button';
import { DividerModule } from 'primeng/divider';
import { RippleModule } from 'primeng/ripple';
import { CommonModule } from '@angular/common';
import { MenuModule } from 'primeng/menu';
import { ToastModule } from 'primeng/toast';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { MenuItem, MessageService } from 'primeng/api';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ButtonModule, DividerModule, RippleModule, CommonModule, MenuModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

export class AppComponent implements OnInit{
  title = 'login_app';
  LoadingStatus = true
  items!: MenuItem[];

  ngOnInit(): void {
    setTimeout(() => {
        this.LoadingStatus = false;  // Remove the loading screen after the animation
      }, 2000);
    this.items = [
            {
                label: 'Options',
                items: [
                    {
                        label: 'Refresh',
                        icon: 'pi pi-refresh'
                    },
                    {
                        label: 'Export',
                        icon: 'pi pi-upload'
                    }
                ]
            }
        ];  
    }
  }

解决方案 #

PrimeNG的弹窗菜单依赖Angular动画模块才能正常工作，项目缺少动画配置导致按钮点击无响应：

• 若使用Angular独立组件（standalone）架构，在app.config.ts中添加provideAnimations()：

import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideAnimations()]
};

• 若为旧版本Angular（非独立组件项目），在app.module.ts中导入BrowserAnimationsModule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserAnimationsModule]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者not_castillo