Question

我是角色2的新手。我设法通过使用NGPrime来创建按钮和日历组件....但我被卡在菜单组件中。

我遵循了This条款，我收到以下错误

错误错误：没有路由器的提供商！ at 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） at resolveNgModuleDep（core.es5.js：9475）在NgModuleRef_.webpackJsonp ... / .. / .. / core/@angular/core.es5.js.NgModuleRef_.get（core.es5.js：10557） at 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'}
                ]
              }
            ]
          }
        ];
      }

    }

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

1 个答案: