Question

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

在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

我有同样的问题。我在const dispatcher = connection.playFile(`./resources/audios/${sound}.mp3`);中包含了BrowserAnimationsModule，并且您必须安装app.module.ts

npm install @angular/animations --save

Answer 2

导入app.module.ts中：

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

Answer 3

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

import {MenuItem} from 'primeng/primeng';

PrimeNG面板菜单无法正常工作

3 个答案: