PrimeNG 面板菜单不起作用答案

【问题标题】：PrimeNG panel menu not workingPrimeNG 面板菜单不起作用
【发布时间】：2019-07-02 01:04:20
【问题描述】：

我会将 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 版本。

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

【问题讨论】：

控制台有错误吗？
我找到了解决方案...我有两个 ngOnInit()..

标签： angular primeng

【解决方案1】：

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

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

  imports: [
    BrowserAnimationsModule,
    BrowserModule ...

【讨论】：

【解决方案2】：

在 app.module.ts 中导入：

import { PanelModule } from 'primeng/panel';
import { PanelMenuModule } from 'primeng/panelmenu';

【讨论】：

【解决方案3】：

你需要在appmodule中添加模块调用。

import {MenuItem} from 'primeng/primeng';

【讨论】：