Angular PrimeNG ConfirmDialog组件

Angular PrimeNG是一个与angular一起使用的框架，用于创建具有出色风格的组件，这个框架非常容易使用，用于制作响应式网站。

在这篇文章中，我们将了解如何在angular primeNG中使用ConfirmDialog组件。ConfirmDialog组件是用来制作一个包含确认按钮的对话框，以确认元素。

属性：

message。它是确认的信息。它是字符串数据类型，默认值为空。
key。这是可选的键，用于匹配确认对话框的键。它是字符串数据类型，默认值为空。
icon。它是显示在信息旁边的图标。它是字符串数据类型，默认值为空。
header。它是对话框的标题文本。它是字符串数据类型，默认值为空。
accept。它是行动被确认时执行的回调。
reject。它是行动被拒绝时执行的回调。
acceptLabel。它是接受按钮的标签。它是字符串数据类型，默认值为空。
rejectLabel。它是拒绝按钮的标签。它是字符串数据类型，默认值为空。
acceptIcon: 它是接受按钮的图标。它是字符串数据类型，默认值为空。
rejectIcon：它是拒绝按钮的图标。它是字符串数据类型，默认值为空。
acceptButtonStyleClass。它用于设置接受按钮的风格类。它是字符串数据类型，默认值为空。
rejectButtonStyleClass。它用于设置拒绝按钮的样式类。它是字符串数据类型，默认值为空。
acceptVisible:它用于设置接受按钮的可见性。它是布尔数据类型，默认值为false。
rejectVisible。它用于设置拒绝按钮的可见性。它是布尔数据类型，默认值是false。
style。它是该组件的内联风格。它是对象数据类型，默认值为空。
styleClass。它是组件的风格类。它是字符串数据类型，默认值为空。
maskStyleClass。它是面具的风格类。它是字符串数据类型，默认值为空。
blockScroll。它用于指定当对话框可见时，是否应该阻止背景滚动。它是布尔数据类型，默认值为false。
closeOnEscape：它指定按下转义键是否应该隐藏对话框。它是布尔数据类型，默认值为false。
dismissableMask：它指定了点击模态背景是否会隐藏对话框。它是布尔数据类型，默认值为false。
defaultFocus：当对话框变得可见时，它是接收焦点的元素。

Events:

onHide。它是对话框被隐藏时触发的回调。

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

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

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG ConfirmDialog组件

例子：这是一个基本的例子，展示了如何使用ConfirmDialog组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ConfirmDialog Component</h5>
<p-confirmDialog [style]="{width: '60vw'}"></p-confirmDialog>
<p-button (click)="GetConfirm()" label="Click Here"></p-button>

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

import { Component } from '@angular/core';
import {ConfirmationService} from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [],
  providers: [ConfirmationService]
})
export class AppComponent { 
    
    constructor(private confirmationService: ConfirmationService,
    private primengConfig: PrimeNGConfig) {}
  
    GetConfirm() {
        this.confirmationService.confirm({
            message: 'Angular PrimeNG ConfirmDialog Component',
            header: 'GeeksforGeeks',
        });
    }
}

输出:

Angular PrimeNG ConfirmDialog组件