PrimeNG 面板菜单不起作用

Question

我会将 PrimeNG 面板菜单集成到我的应用程序中。

在modules.ts我导入PanelMenuModule和MenuModule

import {LeftMenuComponent } from './left-menu/left-menu.component';
import {PanelMenuModule} from 'primeng/panelmenu';
import {MenuModule} from 'primeng/primeng';


@NgModule({
  imports: [
    CommonModule,
    AutoCompleteModule,
    CardModule,
    PanelMenuModule,
    MenuModule

  ],
  declarations: [

  LeftMenuComponent],
  providers:  [
  ],
  exports :[
    AutoCompleteModule,
    CardModule,
    LeftMenuComponent,
    PanelMenuModule,
    MenuModule
  ]
})
export class SharedModule { }

然后在我的组件中导入MenuItem

import { Component, OnInit } from '@angular/core';
import {MenuItem} from 'primeng/primeng';

@Component({
  selector: 'app-left-menu',
  templateUrl: './left-menu.component.html',
  styleUrls: ['./left-menu.component.css']
})
export class LeftMenuComponent implements OnInit {

  constructor() { }
 items: MenuItem[];

    ngOnInit() {
        this.items = [
          ... all menu data like the official example
        ]
}

在 HTML 中：

<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
<p>TEST</p>

然后我在另一个模块中调用这个组件：

<app-left-menu></app-left-menu>

我还将其导入SharedModule到调用左侧菜单组件的模块中。

我在屏幕上看到的只是TEST文字，而不是菜单。

我使用的是 PrimeNG 5.2.0 版本。

如何使菜单面板正常工作？

Answer 1

我有同样的问题。我在我的中包含 BrowserAnimationsModule app.module.ts，你必须安装npm install @angular/animations --save

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

  imports: [
    BrowserAnimationsModule,
    BrowserModule ...