Angular PrimeNG 单选按钮组件

Angular PrimeNG 是一个开源框架，具有丰富的原生 Angular UI 组件集，可用于出色的样式，并且该框架用于非常轻松地制作响应式网站。在本文中，我们将了解如何在 Angular PrimeNG 中使用 RadioButton 组件。

RadioButton 组件：它 允许用户从一组中一次选择一个选项。

特性：

• name：用于设置单选按钮组的名称。它是字符串数据类型，默认值为空。
• value：用于设置单选按钮的值。它是字符串数据类型，默认值为空。
• label：用于设置单选按钮的标签。它是字符串数据类型，默认值为空。
• disabled：指定该元素应该被禁用，它是布尔数据类型，默认值为false。
• tabindex：用于设置元素按跳格顺序的索引。它是数字数据类型，默认值为空。
• inputId：它是底层输入元素的 ID 标识符。它是字符串数据类型，默认值为空。
• ariaLabelledBy：它是 ariaLabelledBy 属性，用于建立组件和标签之间的关系，其中它的值应该是一个或多个元素 ID。它是字符串数据类型，默认值为空。
• style：用于设置元素的内联样式。它是对象数据类型，默认值为空。
• styleClass：用于设置元素的样式类。它是字符串数据类型，默认值为空。
• 咏叹调标签： 它用于定义标记输入元素的字符串。它是字符串数据类型，默认值为空。
• labelStyleClass：用于设置标签的样式类。它是字符串数据类型，默认值为空。

事件：

• onClick：这是一个在单选按钮单击时触发的回调。
• onFocus：当单选按钮获得焦点时触发的回调。
• onBlur：当单选按钮失去焦点时触发的回调。

方法：

• focus：此方法用于对元素应用焦点。

造型：

• p-radiobutton：设置容器元素的样式。
• p-radiobutton-box：设置图标容器的样式。
• p-radiobutton-icon：设置图标元素的样式。
• p-chkbox-label：设置标签元素的样式。
• p-label-active：它为选中状态的标签元素设置样式。
• p-label-focus：它为焦点状态的标签元素设置样式。
• p-label-disabled：它为禁用状态的标签元素设置样式。  

创建 Angular 应用程序和模块安装：

• 第 1 步：使用以下命令创建一个 Angular 应用程序。

  ng new appname

• 第 2 步：创建项目文件夹（即 appname）后，使用以下命令移动到该文件夹。

  cd appname

• 第 3 步：在给定目录中安装 PrimeNG。

  npm install primeng --save
  npm install primeicons --save

项目结构：它将如下所示。

示例 1：这个基本示例说明了在没有预选值的情况下如何使用 RadioButton 组件。

app.component.html

GeeksforGeeks
PrimeNG RadioButton component

  
  
  AngularJS


  
  
  ReactJS


  
  
  HTML


  
  
  JavaScript

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg: string;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RadioButtonModule } from 'primeng/radiobutton';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RadioButtonModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出：

示例 2：在此示例中，我们使用预选值动态构建单选按钮组。

app.component.html

GeeksforGeeks
PrimeNG RadioButton Component

  
  
  {{a.name}}

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  selected: any = null;
  
  gfg: any[] = [
    { name: 'A' },
    { name: 'B' },
    { name: 'C' },
    { name: 'D' },
    { name: 'E' }
  ];
  
  ngOnInit() {
    this.selected = this.gfg[0];
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { RadioButtonModule } from 'primeng/radiobutton';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RadioButtonModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出：

参考： https://primefaces.org/primeng/showcase/#/radiobutton