如何使用 primeNG 在 AngularCli 中创建菜单组件？答案

【问题标题】：How to create a menu component in AngularCli with primeNG?如何使用 primeNG 在 AngularCli 中创建菜单组件？
【发布时间】：2017-08-06 10:01:28
【问题描述】：

我是 Angular 2 的新手。我设法使用 NGPrime 创建按钮和日历组件....但我被菜单组件卡住了。

我按照This 的说明进行操作，但收到以下错误

ERROR 错误：没有路由器提供程序！在 injectionError (core.es5.js:1169) 在 noProviderError (core.es5.js:1207) 在 ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.throwOrNull (core.es5.js:2649) 在 ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKeyDefault (core.es5.js:2688) 在 ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.getByKey (core.es5.js:2620) 在 ReflectiveInjector.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489) 在 resolveNgModuleDep (core.es5.js:9475) 在 NgModuleRef_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557) 在 resolveDep (core.es5.js:11060) 在 createClass (core.es5.js:10913)

这就是我所做的

app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {ButtonModule} from 'primeng/primeng';
    import { AppComponent } from './app.component';
    import {PanelMenuModule} from 'primeng/primeng';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule , ButtonModule ,PanelMenuModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule 

    }

app.component.ts

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


    @Component({
      selector: 'app-root',
      template: `
        <h1>
          Welcome to {{title}}!!!
        </h1>
        <button pButton type="button" label="Click"></button>
        <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-
    panelMenu>




      `,
      styles: []
    })
    export class AppComponent {
      title = 'app';
      items: MenuItem[];

      ngOnInit() {
        this.items = [
          {
            label: 'File',
            icon: 'fa-file-o',
            items: [{
              label: 'New',
              icon: 'fa-plus',
              items: [
                {label: 'Project'},
                {label: 'Other'},
              ]
            },
              {label: 'Open'},
              {label: 'Quit'}
            ]
          },
          {
            label: 'Edit',
            icon: 'fa-edit',
            items: [
              {label: 'Undo', icon: 'fa-mail-forward'},
              {label: 'Redo', icon: 'fa-mail-reply'}
            ]
          },
          {
            label: 'Help',
            icon: 'fa-question',
            items: [
              {
                label: 'Contents'
              },
              {
                label: 'Search',
                icon: 'fa-search',
                items: [
                  {
                    label: 'Text',
                    items: [
                      {
                        label: 'Workspace'
                      }
                    ]
                  },
                  {
                    label: 'File'
                  }
                ]}
            ]
          },
          {
            label: 'Actions',
            icon: 'fa-gear',
            items: [
              {
                label: 'Edit',
                icon: 'fa-refresh',
                items: [
                  {label: 'Save', icon: 'fa-save'},
                  {label: 'Update', icon: 'fa-save'},
                ]
              },
              {
                label: 'Other',
                icon: 'fa-phone',
                items: [
                  {label: 'Delete', icon: 'fa-minus'}
                ]
              }
            ]
          }
        ];
      }

    }

【问题讨论】：

为什么？怎么了？
谢谢...我很困惑...以为是一样的
我认为Primeng不会导致No provider for Router!错误。您的应用程序中缺少一些路由器配置。试试这个answer的解决方案。

标签： angular primeng

【解决方案1】：

知道了，只需要添加角度动画和 BrowserAnimationsModule

像这样：

App.module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { CommonModule } from '@angular/common';
    import {BrowserAnimationsModule} from '@angular/platform-
    browser/animations';
    import { HttpModule } from '@angular/http';
    import {ButtonModule} from 'primeng/primeng';
    import { RouterModule } from '@angular/router';
    import {PanelMenuModule} from 'primeng/primeng';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserAnimationsModule,
        BrowserModule,
        FormsModule,
        HttpModule,
        ButtonModule,
        CommonModule,
        RouterModule,
        PanelMenuModule,
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {

    }

App.component

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


    @Component({
      selector: 'app-root',
      template: `<button pButton type="button" label="Click"></button>
      <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-
       panelMenu>

      `,
    })
    export class AppComponent {
      title = 'app works!';
      items: MenuItem[];

      ngOnInit() {
        this.items = [
          {
            label: 'File',
            icon: 'fa-file-o',
            items: [{
              label: 'New',
              icon: 'fa-plus',
              items: [
                {label: 'Project'},
                {label: 'Other'},
              ]
            },
              {label: 'Open'},
              {label: 'Quit'}
            ]
          },
          {
            label: 'Edit',
            icon: 'fa-edit',
            items: [
              {label: 'Undo', icon: 'fa-mail-forward'},
              {label: 'Redo', icon: 'fa-mail-reply'}
            ]
          },
          {
            label: 'Help',
            icon: 'fa-question',
            items: [
              {
                label: 'Contents'
              },
              {
                label: 'Search',
                icon: 'fa-search',
                items: [
                  {
                    label: 'Text',
                    items: [
                      {
                        label: 'Workspace'
                      }
                    ]
                  },
                  {
                    label: 'File'
                  }
                ]}
            ]
          },
          {
            label: 'Actions',
            icon: 'fa-gear',
            items: [
              {
                label: 'Edit',
                icon: 'fa-refresh',
                items: [
                  {label: 'Save', icon: 'fa-save'},
                  {label: 'Update', icon: 'fa-save'},
                ]
              },
              {
                label: 'Other',
                icon: 'fa-phone',
                items: [
                  {label: 'Delete', icon: 'fa-minus'}
                ]
              }
            ]
          }
        ];
      }

    }

【讨论】：