如何使PrimeNG菜单栏组件起作用？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使PrimeNG菜单栏组件起作用？相关的知识，希望对你有一定的参考价值。

基于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"
  


enter image description here

enter image description here

[我正在尝试使用PrimeNG制作菜单栏，基于http://www.primefaces.org/primeng/#/menubar的示例，我创建了这样的内容：app.component.ts从'@ import Component角/芯'; ...

答案

我遇到了同样的问题，即使在这篇文章中，我仍然可以在各处搜索，只需配置一个简单的空Route：

另一答案

尝试同时导入菜单栏和菜单项

另一答案

我遇到了类似的问题。就我而言，我的应用程序未使用路由，但是PrimeNG仍然需要它。有一个开放的request使路由器可选，但PrimeNG尚未对此做出响应。因此，我创建了自己的路由器服务：

另一答案

浏览器控制台中有任何错误？如果有的话，请发布。

另一答案

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

另一答案

我遇到了同样的问题。我只是无法从primeng / primeng导入MenuItem，甚至尝试搜索接口在哪里，实际上，它位于Primeng版本17的“ common”文件夹中，该文件名为api.d.ts，我尝试复制接口声明，并在我的菜单中使用它，但现在我只是在等待解决方案。同时，您可以尝试使用此方法，它将起作用，只需将项目声明为任何类型即可。

另一答案

查看错误“没有为路由器提供程序”似乎是PrimeNG组件未配置angular2路由器的问题，但我没有确认，如果有人对此进行研究，那就太好了。

另一答案

我刚刚弄清楚了，我相信。

另一答案

也许这会有所帮助。就我而言，我忘记将库添加到angular.json文件中

以上是关于如何使PrimeNG菜单栏组件起作用？的主要内容，如果未能解决你的问题，请参考以下文章

OSX 系统菜单栏在 JavaFX 中不起作用

我怎样才能使我的菜单栏居中？

为啥侧边栏下拉菜单不起作用 bootstrap 3

菜单栏中的登录/注销字段不合适且不起作用（Wordpress）

单击时使导航栏折叠/关闭

从主进程与菜单栏窗口的通信不起作用