Как сделать работу компонента PrimeNG Menubar?

Я пытаюсь сделать строку меню с помощью PrimeNG, на основе, например, из http://www.primefaces.org/primeng/#/menubar Как сделать работу компонента 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" 
    } 
}

источник

2016-06-23 zho

Вы можете поделиться своим html-кодом? – Sergio

ОК, я обновляю его ... – zho

Вы решили? – Sergio

любые ошибки ввода n консоль браузера? Если есть, напишите об этом.

Я думаю, что вам необходимо зарегистрироваться p-menubar директива к вашему компоненту. Попробуйте добавить метаданные директив в @Component.

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

источник

2016-06-23 04:23:18

nope, нет ошибки, и я не могу добавить директивы: [PMenubar], они сказали «Не могу найти PMenubar», поэтому я пробую директивы: [Menubar], и все еще не работает. .. – zho

«PMenubar» не является директивой primeng – Sergio

Попробуйте импортировать как Menubar и MenuItem

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

В соответствии с вашим menubardemo.components.ts, вы используете только MenuItem.

источник

2016-06-23 17:22:48 Sanket

@ jo удачи с PrimeNG MenuBar? – Sanket

nope ... это не работает ... – zho

документация не очень полно в этом случае, вы можете посмотреть на исходный код, и вы найдете более полный пример: https://github.com/primefaces/primeng/tree/master/showcase/demo/menubar

Учитывая, что angular2 базируется на компонентах, лучше, если вы извлекаете меню в одном компоненте, а затем вы можете ссылаться на него с AppComponent.Для этого сначала необходимо создать отдельную машинопись файл компоненты, в данном случае 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 { }

Одна важная вещь, чтобы помнить: ВСЕГДА «`»(кавычка) при создании шаблона непосредственно в определении компонента, вы ар e, используя "'" (одиночная кавычка) и неверно (если вашему html требуется больше строк, подумайте об извлечении его в другой файл).

Вы инстанцировании компонент: items = new MenubarDemo(), что также неправильно, потому что компоненты впрыскивается для вас автоматически, только объявить компонент в поле directives.

источник

2016-06-26 14:22:41 Sergio

Я все еще не могу запустить эту панель меню, так что разочарование ... – zho

В частности, ошибка ?, можете ли вы добавить обновленную версию своего кода ?? – Sergio

i follow ur method, и он показывает некоторую ошибку «zone.js: 461 Unhandled Promise rejection: EXCEPTION: ошибка ./Menubar class Menubar - встроенный шаблон: 3: 12 ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Нет провайдера для маршрутизатора!" что-то не так с моим кодом? – zho

Глядя на ошибку «Нет провайдера для маршрутизатора» выглядит как проблема с компонентом PrimeNG, у которого нет настроенного маршрутизатора с угловым2, но я не подтвердил, было бы неплохо, если кто-то вникает в это.

Во всяком случае, у меня была эта проблема, добавил некоторые базовые функции маршрутизации и она работала, поэтому я делю его, это должно быть что-то вроде этого:

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 { }

источник

2016-07-06 14:44:43

i've столкнулись с той же проблемой. Я просто не могу импортировать MenuItem из primeng/primeng, я даже попытался найти, где находится интерфейс, на самом деле находится внутри «общей» папки в Primeng версии 17, файл называется api.d.ts , я попытался скопировать объявление интерфейса и использовать его в своем Меню, но пока им просто ждут решения. Тем временем вы можете попробовать это, и он будет работать, просто объявите элементы как любые типы.

 private items: any[];

Это все.

источник

2016-10-13 16:22:21 uajov6

У меня была такая же проблема, и поиск везде, даже в этом посте, я был в состоянии решить, только для настройки простой пустой маршрут:

app.module.ts

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

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

индекс.html:

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

источник

2016-12-15 21:19:26

Просто сделав над модификацией 'app.module.ts', работал для меня. –

У меня возникла аналогичная проблема. В моем случае мое приложение не использует маршрутизацию, но PrimeNG все еще требует его. Существует открытый request, чтобы сделать маршрутизатор необязательным, но PrimeNG не ответил на это. Таким образом, я создал свою собственную службу маршрутизатора:

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

Тогда я изменил мой systemjs.config.js указать @angular/router к моему новому маршрутизатору. Это отлично работает, и я могу использовать компонент без необходимости использования маршрутизатора.

источник

2017-03-03 18:49:32 tanspac

Я просто понял, что считаю.

Вы должны импортировать MenuModule в app.module.ts

//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 { }

Это должно исправить вашу проблему.

источник

2017-04-01 00:01:45

Как сделать работу компонента PrimeNG Menubar?

ответ

Смежные вопросы