Angular6中使用primeNG UI框架

第一步:使用ng new project

ng new PrimeNGproject
1
第二步:可以运行一下是否成功

ng s
1
第三步:安装primeNG

npm install primeng
1
第四步:安装font-awesome(一个图标字体库和CSS框架 )

npm install font-awesome
1
第五步:配置angular.json

 "styles": [
     "src/styles.css",
     "node_modules/primeng/resources/themes/omega/theme.css",
     "node_modules/primeng/resources/primeng.min.css",
     "node_modules/font-awesome/css/font-awesome.css"
],
1
2
3
4
5
6
注意:如果angular版本在六以下,则是配置配置angular-cli.json,本质是一样的,只是Angular6将angular.json替代了angular-cli.json

第六步:使用primeNG中的组件时,需要将primeNG中的模块在App.module导入进来,因为有很多组件需要引入,我们可以新建一个primeNG.module.ts文件,专门用来引进primeng中的各个组件模块


import { NgModule } from '@angular/core';

import {
    PanelMenuModule,
    ...
} from 'primeng/primeng';

@NgModule({
    exports: [
        PanelMenuModule,
        ...
    ]
})
export class PrimeNGModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
再在App.module.ts中声明

import { PrimeNGModule } from './primeng.module';
@NgModule({
    declarations: [
        ...
    ],
    imports: [
        PrimeNGModule,
        ...
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
第七步:添加demo,添加一个panelmenu

html:

ts:
this.items = [
    {
        label: '车机功能',
        items: [
              {
                 label: '车机应用',      
                 items: [    //下一级菜单
                      {
                          label: '频率',
                           items: [{
                                   label: 'content',
                                   routerLink: './content',    //添加路由
                                   command: (event) => {       //添加回调函数,即点击‘content’的时候会触发该函数
                                        console.log('0', event)
                                   }
                                 },
                                 {
                                     label: 'test',
                                     routerLink: './test',
                                 }
                                ],
                            },
                        ]
                    }
                ],
            }];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


具体每个组件的使用去primeNG官网查看就好了

原文:https://blog.csdn.net/zhy13087344578/article/details/80449677 
 

你可能感兴趣的:(angular)