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文件中添加显示的代码：

<!-- 顶部导航 -->
    <p-tabView orientation="left">
        <p-tabPanel header="首页" [selected]="true">
            首页内容
        </p-tabPanel>
         <p-tabPanel header="登录">
            登录内容
        </p-tabPanel>
        <p-tabPanel header="关于">
            关于内容
        </p-tabPanel>
    </p-tabView>

在.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"
]

 

最后显示出来的效果：