如何使 PrimeNG 菜单栏组件工作？
Posted
技术标签:
【中文标题】如何使 PrimeNG 菜单栏组件工作？【英文标题】：How to make PrimeNG Menubar component work? 【发布时间】：2016-10-25 03:42:17 【问题描述】：我正在尝试使用 PrimeNG 制作菜单栏，基于来自 http://www.primefaces.org/primeng/#/menubar 的示例
我创造了这样的东西：
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"
【问题讨论】：
可以分享你的html代码吗？ 好的，我更新它... 你解决了吗？？ 不...仍然无法正常工作... 【参考方案1】：这可能会对某些人有所帮助。就我而言，我忘记在 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"
],
这肯定会显示菜单栏
【讨论】：
【参考方案2】：我只是想通了，我相信。
需要在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
这应该可以解决您的问题。
【讨论】：
【参考方案3】：我遇到了类似的问题。在我的情况下，我的应用程序没有使用路由，但 PrimeNG 仍然需要它。有一个开放的request 使路由器成为可选的，但 PrimeNG 没有对此做出回应。所以我创建了自己的路由器服务：
export class Router
constructor()
public navigate(route: any[]):void
// Do nothing
然后我修改了我的systemjs.config.js 以将@angular/router 指向我的新路由器。这很好用，我可以在不需要路由器的情况下使用该组件。
【讨论】：
【参考方案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
【讨论】：
【参考方案5】：我有同样的问题，到处搜索，即使在这个帖子中，我也能够解决它，只需配置一个简单的空路由：
app.module.ts
import RouterModule from '@angular/router';
@NgModule(
...
imports: [ RouterModule.forRoot([]), ... ]
...
)
index.html：
<script>document.write('<base href="' + document.location + '" />');</script>
【讨论】：
对app.module.ts进行上述修改对我有用。【参考方案6】：
我遇到了同样的问题。 我就是无法从primeng/primeng导入MenuItem，我什至试图搜索界面在哪里， 实际上它位于“common”文件夹中，在primeng 17版中，该文件名为 api.d.ts ，我试图复制 接口声明并在我的菜单中使用它，但现在我只是在等待解决方案。 同时你可以试试这个，它会起作用，只需将项目声明为任何类型。
private items: any[];
就是这样。
【讨论】：
【参考方案7】：在这种情况下文档并不完整，你可以看一下源代码，你会发现一个更完整的例子：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 字段。
【讨论】：
一个特别的错误？，你能添加你的代码的更新版本吗？？ 我遵循你的方法，它显示一些错误“zone.js:461 未处理的承诺拒绝：异常：./Menubar 类菜单栏出错 - 内联模板：3:12 原始异常：没有路由器提供程序！”我的代码有问题吗？ 哦，这看起来像是另一个问题，试试这个前段时间对我有用的解决方案：***.com/questions/34535163/…，让我知道它是否有效 如果你能用你所有的代码更新你的问题，我真的很感激，我会更容易帮助你。 是的，您应该添加我链接的答案中的更改（基本标签+引导中的附加配置）【参考方案8】：尝试同时导入 Menubar 和 MenuItem
import Menubar,MenuItem from 'primeng/primeng';
根据您的 menubardemo.components.ts，您只使用了 MenuItem。
【讨论】：
@zho PrimeNG MenuBar 运气好吗？【参考方案9】：浏览器控制台中的任何错误？如果有，请发帖。
我认为您需要将 p-menubar 指令注册到您的组件。尝试将指令元数据添加到@Component。
@Component(
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1><p-menubar [model]="items"></p-menubar>',
directives: [PMenubar]
)
【讨论】：
不，没有错误，我无法添加指令：[PMenubar]，他们说“找不到 PMenubar”，所以我尝试指令：[Menubar]，但仍然无法正常工作......跨度> “PMenubar”不是primeng指令以上是关于如何使 PrimeNG 菜单栏组件工作？的主要内容，如果未能解决你的问题，请参考以下文章