Primeng按钮Angular教程|p-button实例

这篇文章涵盖了一个整合primeng按钮的例子。

首先请看这个教程如何 将primeng整合到Angular中,来做以下事情:

• 使用ng cli命令创建一个Angular应用程序
• 将primeng整合到Angular应用程序中

在应用程序模块文件即app.module.ts中

• 从primeng库中导入ButtonModule
• 将ButtonModule添加到app模块的导入部分。

app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Primeng按钮示例

在HTML模板中，你可以通过两种方式添加按钮

• p-button元素
• pButton指令

p-button元素是一个新的元素，我们可以添加，如下图所示。

<p-button label="Reset"></p-button>

pButton指令允许将primeng行为添加到现有的HTML按钮元素中。

<button pButton type="button" label="Submit"></button>

app.component.html

<span><button pButton type="button" label="Submit">
  </button></span>
<span>
  <p-button label="Reset"></p-button>
</span>

Primeng按钮的颜色和样式

primeg通过css选择器提供了不同的按钮变化:

• p-button-primary
• p-button-secondary
• p-button-success
• p-button-info
• p-button-warning
• p-button-help
• p-button-danger

下面是一个例子

<button pButton type="button" label="Primary Button" class="p-button-primary"></button>
<button pButton type="button" label="Secondary Button" class="p-button-secondary"></button>
<button pButton type="button" label="Success Button" class="p-button-success"></button>
<button pButton type="button" label="Info Button" class="p-button-info"></button>
<button pButton type="button" label="Warning Button" class="p-button-warning"></button>
<button pButton type="button" label="Help Button" class="p-button-help"></button>
<button pButton type="button" label="Danger Button" class="p-button-danger"></button>

输出:

如何为primeng按钮添加图标？

primeng按钮有一个icon 属性，这些图标可以是primeng或fontawesome图标。

按钮的图标使用iconPos ，默认位置是左边。

<button pButton type="button" label="Edit" icon="pi pi-user-edit"></button>
<button pButton type="button" label="Delete" icon="pi pi-trash"></button>
How to disable the primeng button

如何禁用primeng按钮

一种方法是，可以添加disabled 属性，使其按钮失效。

另一种方法是使用属性绑定[disabled]和表达式，这些表达式被评估为真值或假值。

<h1>{{title}}</h1>
<button pButton type="button" [disabled]="isDisabled" label="Disabled Button"></button>

在Typescript组件中，定义与disabled属性绑定的类变量。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'primeng button disabled example';
  public isDisabled: boolean;
  constructor() {
    this.isDisabled = true;
  }

}

primeng按钮尺寸

它提供了不同的尺寸

• 常规或默认尺寸
• 小按钮使用p-button-sm
• 大按钮使用p-button-lg

下面是一个例子

<button pButton type="button" label="Regular" class="p-button-sm"></button>

<button pButton type="button" label="small" class="p-button-sm"></button>
<button pButton type="button" label="large" class="p-button-lg"></button>

primeng按钮事件点击示例

你可以用pButton 指令给p-button element 或html按钮元素添加onClick事件。

<p-button label="Click" (onClick)="clickEvent()"></p-button>

在typecript组件中，甚至可以定义绑定函数

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

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

  clickEvent(event) {
    console.log("Click Event fired");
  }

}

你也可以向事件绑定函数传递参数

在模板html组件中:

<p-button label="Click" (onClick)="clickEvent($event)"></p-button>

在typecript组件中:

  clickEvent(event: any) {
    console.log("Click Event fired");
  }

问题

最初，我在Angular应用程序中使用按钮时遇到了很多问题。

按钮标签不工作

要在angular应用程序中使用primeng按钮，你必须在angular应用程序中导入Button模块。首先，请确保在angular.json中正确配置了primeng和图标样式。

  "styles": [
        "src/styles.scss",
         "node_modules/primeng/resources/themes/saga-blue/theme.css",
         "node_modules/primeng/resources/primeng.min.css",
         "node_modules/primeicons/primeicons.css",
]

第二，检查按钮模块是否导入到应用程序中

import { ButtonModule } from 'primeng/button';

@NgModule({
   imports: [
      ButtonModule
   ]