PrimeNG 中的分层菜单
Tieredmenu in PrimeNG
Angular 2,2.0.0 版 + PrimeNG。我会像这样实现弹出菜单:
我使用此命令在我的项目中安装 PrimeNG -> npm install primeng --save
,并在我的 app.module.ts -> import {TieredMenuModule} from "primeng/primeng"
中导入 TieredMenuModule
。然后我创建组件并导入 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>
毕竟我明白了:
按钮不是蓝色的,也没有标签。
可能是样式有问题,或者我没有再导入一件东西?
而不是在组件中导入所有 css 像这样在 css 对象下的 angular-cli.json 文件中导入所有 -
"styles": [
"../node_modules/primeui/primeui-ng-all.min.css",
"...."
],
Angular 2,2.0.0 版 + PrimeNG。我会像这样实现弹出菜单:
我使用此命令在我的项目中安装 PrimeNG -> npm install primeng --save
,并在我的 app.module.ts -> import {TieredMenuModule} from "primeng/primeng"
中导入 TieredMenuModule
。然后我创建组件并导入 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>
毕竟我明白了:
按钮不是蓝色的,也没有标签。
可能是样式有问题,或者我没有再导入一件东西?
而不是在组件中导入所有 css 像这样在 css 对象下的 angular-cli.json 文件中导入所有 -
"styles": [
"../node_modules/primeui/primeui-ng-all.min.css",
"...."
],