2

我对自己的编程有点陌生，我目前正在尝试使用 PrimeNG 构建一个 Web-Overlay 演示，但我遇到了问题。我使用来自 primefaces.org 的“演示”代码来显示 PanelMenu，但它没有显示出来。我首先尝试了 Buttons 和 Accordeon，并且成功了。

这是我的代码：

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

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


@Component({
    selector: 'menu',
    template: `<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>`,
    directives: [PanelMenu],
})


export class PanelMenuDemo implements OnInit {
  
    private items: MenuItem[];

    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'}
                        ]
                    }
                ]
            }
        ];
    }
}

我指的是我的 html 正文中的选择器。我已经通过 gulp.inject 注入了所有的 css 和 js 东西，正如已经说过的，Buttons 和 Accordeon 工作正常。

请不要忘记我对编程真的很陌生，所以请耐心和我说话，就好像我很愚蠢一样！;) 到目前为止谢谢！

编辑：

我为此添加了一个 plunkr。这次我尝试使用 PrimeNG 的简单“菜单”。我收到错误“没有路由器提供商”，但我根本没有使用任何路由器。 普朗克

My folder structur is like this: 
config
--config.js
dist
--distfiles
src
--app.component.html/.scss/.ts
--main.ts
tasks
--build.js
--clean.js
--watch.js
--webserver.js
gulpfile.js

希望这有助于找到我的问题。

4

0 回答 0