PrimeNG中的Tieredmenu

时间:2017-03-10 06:46:40

标签: angular primeng

Angular 2,v.2.0.0 + PrimeNG。我会实现这样的弹出菜单:

enter image description here

我使用此命令在我的项目中安装PrimeNG - >我的app.module.ts中的npm install primeng --save和导入TieredMenuModule - > import {TieredMenuModule} from "primeng/primeng"。然后我创建组件并导入MenuItem - > import {MenuItem} from 'primeng/primeng',以及node_modules中的所有样式(当然在我的组件中):

import "../../../node_modules/primeng/resources/primeng.min.css"; 
import "../../../node_modules/primeng/resources/themes/omega/theme.css"; 
import "../../assets/font-awesome/css/font-awesome.min.css"; 

然后我添加private items: MenuItem[]ngOnInit()功能:

 public ngOnInit(): void {
    this.items = [ ... ]
 }

在我的模板中,我通过此代码:

<p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

毕竟我得到了这个:

enter image description here

按钮不是蓝色且没有标签。

风格可能有问题,或者我不再导入一件东西?

1 个答案:

答案 0 :(得分:1)

而不是导入组件中的所有css导入所有在css对象下的angular-cli.json文件中,如下所示 -

"styles": [
    "../node_modules/primeui/primeui-ng-all.min.css",
    "...."
],