第一步：使用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：
<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
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】環境搭建及遇到的問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)