PrimeNG Menubarコンポーネントを機能させる方法は？
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"
}
}
私は同じ問題を抱えていて、どこでも検索していました。この投稿でも、単純な空のルートを構成するだけで解決できました：
app.module.ts
import { RouterModule } from '@angular/router';
@NgModule({
...
imports: [ RouterModule.forRoot([]), ... ]
...
})
index.html：
<script>document.write('<base href="' + document.location + '" />');</script>
私は同様の問題に遭遇しました。私の場合、私のアプリケーションはルーティングを使用していませんが、PrimeNGはそれを必要とします。ルーターをオプションにするオープン request がありますが、PrimeNGはそれに応答していません。だから私は自分のルーターサービスを作成しました：
export class Router
{
constructor(){}
public navigate(route: any[]):void
{
// Do nothing
}
}
次に、systemjs.config.js ポイントへ @angular/router新しいルーターに。これはうまく機能し、ルーターを必要とせずにコンポーネントを使用できます。
MenubarとMenuItemの両方をインポートしてみてください
import {Menubar,MenuItem} from 'primeng/primeng';
Menubardemo.components.tsに従って、MenuItemのみを使用しています。
ブラウザコンソールにエラーがありますか？あれば投稿してください。
p-menubarディレクティブをコンポーネントに登録する必要があると思います。ディレクティブメタデータを@Componentに追加してみてください。
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1><p-menubar [model]="items"></p-menubar>',
directives: [PMenubar]
})
私は同じ問題に遭遇しました。私はprimeng/primengからMenuItemをインポートできません、私はインターフェイスがどこにあるかを検索しようとしました、実際それはprimengバージョン17の「common」フォルダー内にあり、ファイルはそのapi.d.tsと呼ばれ、私はインターフェース宣言をコピーしてメニューで使用しようとしましたが、今のところ解決策を待っています。その間、これを試すことができ、それは機能します。項目を任意のタイプとして宣言するだけです。
private items: any[];
それでおしまい。
この場合、ドキュメントは完全ではありません。ソースコードを確認すると、より完全な例が見つかります。 https://github.com/primefaces/primeng/tree/master/showcase/デモ/メニューバー
Angular2がコンポーネントに基づいていることを考えると、1つのコンポーネントでメニューバーを抽出し、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 { }
_覚えておくべき重要なことの1つは、コンポーネントの定義でテンプレートを直接作成するときは常に「 `」（バックティック）を使用し、「」（一重引用符）を使用していて、正しくない（htmlにさらに行が必要な場合は、他のファイルに抽出することを検討してください） ）。
コンポーネントをインスタンス化しています：items = new MenubarDemo()。これもコンポーネントが自動的に挿入されるため正しくありません。directivesフィールドでのみコンポーネントを宣言します。
私はこれを信じていると思いました。
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 { }
これで問題が解決するはずです。
これは誰かを助けるかもしれません。私の場合、angular.jsonファイルにライブラリを追加するのを忘れていました
ステップ1：app.module.tsコードで：
@NgModule({
declarations: [AppComponent, HeaderComponent, MenubarComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
MenuModule,
MenubarModule,
BreadcrumbModule,
],
注：Menubarモジュールが追加されていることを確認し、以下のようにインポートしてください。
import { MenubarModule } from 'primeng/menubar';
ステップ2：別のコンポーネントにメニューバーがある場合
export class MenubarComponent implements OnInit {
items: MenuItem[];
そして、次のインポートがあることを確認してください
import { MenuItem } from 'primeng/api';
ステップ3：これはmissingの部分でした。あなたが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"
],
これは確かにメニューバーを表示します
「ルーターのプロバイダーがありません」というエラーを見ると、angular2ルーターが設定されていないPrimeNGコンポーネントの問題のように見えますが、私は確認しませんでした。
とにかく、私はこの問題があり、いくつかの基本的なルーティングを追加し、それが機能したので、私はそれを共有しています、それは次のようになるはずです：
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)
];
new：content.component.ts（デフォルトコンポーネント）
import { Component } from '@angular/core';
@Component({
selector: 'content',
template: '<div><p>This is some content</p></div>'
})
export class ContentComponent { }