zoukankan      html  css  js  c++  java
  • angular项目中使用Primeng

    1.第一步把依赖添加到项目中

    npm install primeng --save

    npm install @angular/animations --save

    npm install font-awesome@4.7.0 --save

    2.在.angular-cli.json中添加

    "styles": [
    "styles.css",
    "../node_modules/primeng/resources/primeng.min.css",
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "../node_modules/font-awesome/css/font-awesome.min.css"
    ],

    3.在app.module.ts中添加以下模块

     

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

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

    import { AppComponent } from './app.component';
    import {FormsModule} from "@angular/forms";
    import {HttpModule} from "@angular/http";
    import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
    import {ButtonModule, InputTextModule} from "primeng/primeng";

    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    InputTextModule,
    ButtonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    4.在app.component.ts中添加
    import {Component} from '@angular/core';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    constructor( ) { }

    name: string;

    message: string;

    onClick() {

    this.message = "Hello , " + this.name;

    }
    }
    5.在app.component.html中添加

    <input type="text" [(ngModel)]="name" pInputText>

    <button type="button" pButton label="Click" icon="fa fa-check" (click)="onClick($event)"></button>

    <div>{{message}}</div>
    测试结果:

    
    












    
    
    
  • 相关阅读:
    javascript之数组去重方法
    经典问题之爬楼梯
    javascript之事件循环机制
    javascript之闭包
    javascript之动态改变this上下文
    块级元素的垂直居中对齐
    js数组对象
    javascript-冒泡法排序
    javascript-数组
    javascript-循环
  • 原文地址:https://www.cnblogs.com/kaid/p/7532022.html
Copyright © 2011-2022 走看看