angular使用什么样的样式_angular4套用primeng样式

首先安装primeng

cnpm install primeng --save

这样会在项目目录中增加node_modules\primeng目录

package.json文件增加了以下一行

"primeng": "^4.3.0",

在app.module.ts文件中添加：

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { UserLoginComponent } from './user/user-login/user-login.component';

import { RouterModule } from '@angular/router';

import {appRoutes} from './app.routes';

import {AutoCompleteModule, TabViewModule, ButtonModule} from "primeng/primeng";//新增

@NgModule({

declarations: [

AppComponent,

UserLoginComponent

],

imports: [

BrowserModule,

RouterModule,

RouterModule.forRoot(appRoutes),

AutoCompleteModule,//新增

TabViewModule,//新增

ButtonModule//新增

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

在app.component.html文件中添加显示的代码：

首页内容

登录内容

关于内容

在.angular-cli.json文件中添加：(这个不用添加也可以，看到有的文章添加了，不知道干嘛用的)

"styles": [

"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"

]

最后显示出来的效果：