如何让 PrimeNG 菜单栏组件工作？

Question

我正在尝试根据 http://www.primefaces.org/primeng/#/menubar

中的示例使用 PrimeNG 制作菜单栏

我创建了这样的东西：

app.component.ts

import {Component} from '@angular/core';
import {MenuBarComponent} from "./menubardemo.component";
@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1><demo></demo>`,
  directives:[MenuBarComponent] })
export class AppComponent { }

menubardemo.components.ts

import {Component, OnInit} from "@angular/core";
import {Menubar, MenuItem} from "primeng/primeng";
@Component({
  selector: 'demo',
  template: `<p-menubar [model]="items"> </p-menubar>`,
  directives: [Menubar] })
export class MenuBarComponent implements OnInit {
  private items:MenuItem[];// you know how to fill this in the "OnInit" method

  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'}
            ]
          }
        ]
      },
      {
        label: 'Quit', icon: 'fa-minus'
      }
    ];
  }
}

在我签出后，数据对象打印在 DOM 上，但菜单栏未显示。

更新：

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/primeui/primeui-ng-all.min.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
      "@angular/common":  "2.0.0-rc.1",
      "@angular/compiler":  "2.0.0-rc.1",
      "@angular/core":  "2.0.0-rc.1",
      "@angular/http":  "2.0.0-rc.1",
      "@angular/platform-browser":  "2.0.0-rc.1",
      "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
      "@angular/router":  "2.0.0-rc.1",
      "@angular/router-deprecated":  "2.0.0-rc.1",
      "@angular/upgrade":  "2.0.0-rc.1",
      "systemjs": "0.19.27",
      "es6-shim": "^0.35.0",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.7",
      "primeng": "1.0.0-beta.7",
      "primeui": "4.1.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "jasmine-core": "~2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2"
  },
  "repository": {}
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {

  // map tells the System loader where to look for things
  var map = {
    'app': 'app', // 'dist',

    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    'primeng': 'node_modules/primeng'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app': {main: 'main.js', defaultExtension: 'js'},
    'rxjs': {defaultExtension: 'js'},
    'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
    'primeng': {defaultExtension: 'js'}
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/' + pkgName] = {main: 'index.js', defaultExtension: 'js'};
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = {main: 'index.js', defaultExtension: 'js'};

  var config = {
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

typings.json

{
  "globalDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  }
}

Answer 1

浏览器控制台有错误吗？有的话麻烦post吧

我认为您需要将 p-menubar 指令注册到您的组件。尝试将指令元数据添加到@Component。

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><p-menubar [model]="items"></p-menubar>',
  directives: [PMenubar]
})

Answer 2

尝试同时导入 Menubar 和 MenuItem

import {Menubar,MenuItem} from 'primeng/primeng';

根据您的 menubardemo.components.ts，您只使用了 MenuItem。

Answer 3

这种情况下的文档不是很完整，你可以看看源代码，你会找到一个更完整的例子：https://github.com/primefaces/primeng/tree/master/showcase/demo/menubar

考虑到 angular2 是基于组件的，如果你在一个组件中提取菜单栏然后你可以从 AppComponent 中引用它会更好。为此，您首先需要为您的组件创建一个单独的 Typescript 文件，在本例中为 menubardemo.component.ts:

然后您需要将 @Component 添加到 MenubarDemoComponent，如下所示：

import {Component, OnInit} from "@angular/core";
import {Menubar, MenuItem} from "primeng/primeng";
@Component({
    selector: 'demo',
    template: `<p-menubar [model]="items"> </p-menubar>`,
    directives: [Menubar] })
export class MenuBarComponent implements OnInit {     
    private items:MenuItem[];// you know how to fill this in the "OnInit" method
}

然后像这样将其添加到 AppComponent 中：

import {Component} from '@angular/core'; 
import {MenuBarComponent} from "./menubardemo.component"; 
@Component({   
    selector: 'my-app',   
    template: `<h1>My First Angular 2 App</h1><demo></demo>`,
    directives:[MenuBarComponent] }) 
export class AppComponent { }

要记住一件重要的事情：始终使用“`”（反引号）直接在组件的定义中创建模板，您正在使用 " ' "（单引号）并且不正确（如果您的 html 需要更多行，请考虑将其提取到其他文件）。

您正在实例化组件：items = new MenubarDemo()，这也是不正确的，因为组件是自动为您注入，只需在 directives 字段。

Answer 4

查看错误 "No provider for Router" 看起来像是 PrimeNG 组件没有配置 angular2 路由器的问题，但我没有确认，如果有人深入研究这个就好了。

无论如何，我遇到了这个问题，添加了一些基本的路由并且它起作用了，所以我分享它，它应该是这样的：

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

import { provide } from '@angular/core';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import {APP_BASE_HREF} from '@angular/common';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS,provide(APP_BASE_HREF, {useValue : '/' })]);

app.component.ts

import { Component } from '@angular/core';
import {MenuBarComponent} from "./menubardemo.component";
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES, MenuBarComponent],
  template: `
    <h1>My First Angular 2 App</h1>
    <demo></demo>
    <div>
      <router-outlet></router-outlet>
    </div>     
  `
})
export class AppComponent { }

新：app.routes.ts

import {provideRouter,RouterConfig} from '@angular/router';
import {ContentComponent} from './content.component'

export const routes: RouterConfig = [
    {path: '', component: ContentComponent}
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

新：content.component.ts（默认组件）

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

@Component({
  selector: 'content',
  template: '<div><p>This is some content</p></div>'
})
export class ContentComponent { }

Answer 5

我遇到过同样的问题。我只是无法从 primeng/primeng 导入 MenuItem，我什至尝试搜索界面在哪里，实际上它在 "common" 文件夹中，在 primeng 版本 17 中，文件名为 api.d.ts ，我试图复制接口声明并在我的菜单中使用它，但现在我只是在等待解决方案。同时你可以试试这个，它会起作用，只需将项目声明为任何类型。

      private items: any[];

就是这样。

Answer 6

我遇到了同样的问题，到处搜索，即使在这个post，我也能解决它，只是配置一个简单的空路由：

app.module.ts

import { RouterModule }   from '@angular/router';

@NgModule({
...
imports: [ RouterModule.forRoot([]), ... ]
...
})

index.html:

<script>document.write('<base href="' + document.location + '" />');</script>

Answer 7

我运行遇到了类似的问题。在我的例子中，我的应用程序没有使用路由，但 PrimeNG 仍然需要它。有一个开放 request 使路由器可选，但 PrimeNG 尚未对此做出回应。所以我创建了自己的路由器服务：

export class Router
{
   constructor(){}
   public navigate(route: any[]):void
   {
       // Do nothing
   }
}

然后我修改了 systemjs.config.js 以将 @angular/router 指向我的新路由器。这很好用，我可以在不需要路由器的情况下使用该组件。

Answer 8

我相信我刚刚弄明白了这一点。

您需要在 app.module.ts

中导入 MenuModule

//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {MenuModule} from 'primeng/primeng';



import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这应该可以解决您的问题。

Answer 9

这可能会对某些人有所帮助。就我而言，我忘记在 angular.json 文件

中添加库

第 1 步：在 app.module.ts 代码中：

@NgModule({
    declarations: [AppComponent, HeaderComponent, MenubarComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        MenuModule,
        MenubarModule,
        BreadcrumbModule,
    ],

注意：确保您已经添加了菜单栏模块并像下面那样导入它

import { MenubarModule } from 'primeng/menubar';

第 2 步：如果您在单独的组件中有菜单栏

export class MenubarComponent implements OnInit {
    items: MenuItem[];

并确保您有以下导入

import { MenuItem } from 'primeng/api';

第 3 步：这是我缺少的部分。如果您安装了 primeng 的 npm，那么在

在 angular.json 文件中：确保你有必要的 primeng 库，如下所示

在架构师构建下

"styles": [
                        "node_modules/primeicons/primeicons.css",
                        "node_modules/primeng/resources/themes/nova-light/theme.css",
                        "node_modules/primeng/resources/primeng.min.css",   
                        "src/styles.scss"
                    ],

这肯定会显示菜单栏

如何让 PrimeNG 菜单栏组件工作？

How to make PrimeNG Menubar component work?

typescript

angular

primeng