如何使用primeNG在AngularCli中創建菜單組件？

Question

我是新手角2.我設法通過使用NGPrime創建按鈕和日曆組件...但我被卡住菜單組件。

我跟着This指示，我發現了以下錯誤

ERROR錯誤：沒有提供商路由器！ at injectionError（core.es5.js：1169） at noProviderError（core.es5.js：1207） at 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） at ReflectiveInjector .webpackJsonp .../../../core/@angular/core.es5.js.ReflectiveInjector_。 getByKey（core.es5.js：2620） at 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'} 
       ] 
       } 
      ] 
      } 
     ]; 
     } 

    } 

Answer 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'} 
       ] 
       } 
      ] 
      } 
     ]; 
     } 

    }