Angular PrimeNG ConfirmDialog 基础

Angular PrimeNG是一个与angular一起使用的框架，用于创建具有出色风格的组件，这个框架非常容易使用，用于制作响应式网站。本文将告诉我们如何在Angular PrimeNG中使用**ConfirmDialog Basic。

ConfirmDialog组件用于制作一个包含确认按钮的对话框来确认元素。

Angular PrimeNG ConfirmDialog 基本属性：

style。它是该组件的内联风格。它是对象数据类型，默认值为空。
styleClass。它是组件的风格类。它是字符串数据类型，默认值为空。
acceptButtonStyleClass。它用于设置接受按钮的风格类。它是字符串数据类型，默认值为空。
rejectButtonStyleClass。它用于设置拒绝按钮的样式类。它是字符串数据类型，默认值为空。
acceptLabel。它是接受按钮的标签。它是字符串数据类型，默认值为空。
rejectLabel。它是拒绝按钮的标签。它是字符串数据类型，默认值为空。
icon。它是显示在信息旁边的图标。它是字符串数据类型，默认值为空。
header。它是对话框的标题文本。它是字符串数据类型，默认值为空。
accept。它是行动被确认时执行的回调。
reject。当一个行动被拒绝时，它是执行的回调。

语法:

<p-confirmDialog 
    [style]="..." [baseZIndex]="..." 
    rejectButtonStyleClass="p-button-text">
</p-confirmDialog>

<p-button
    (click)="...." 
    label="...">
</p-button>

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG ConfirmDialog Basic

运行以下命令以查看输出。

ng serve --open

示例1：下面是说明使用Angular PrimeNG ConfirmDialog Basic确认按钮的示例代码。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG ConfirmDialog Basic</h5>
  
<p-confirmDialog 
    [style]="{ width: '30vw' }">
</p-confirmDialog>
  
<p-button 
    (click)="decision()" 
    label="Buy GfG Course">
</p-button>
  
<p-messages 
    [value]="ToastMessages">
</p-messages>

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';
import { Message } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [],
  providers: [ConfirmationService],
})
  
export class AppComponent {
  ToastMessages: Message[];
  
  constructor(
    private confirmationService: ConfirmationService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  decision() {
    this.confirmationService.confirm({
      message: 'Confirm Buying this course?',
      header: 'GeeksforGeeks',
      icon: 'pi pi-exclamation-triangle',
      accept: () => {
        this.ToastMessages = [
          {
            severity: 'success',
            summary: 'Success',
            detail: 'You have bought this course!',
          },
        ];
      },
      reject: () => {
        this.ToastMessages = [
          {
            severity: 'info',
            summary: 'Rejected',
            detail: 'You have rejected bought this course!',
          },
        ];
      },
    });
  }
}

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 { MessagesModule } from 'primeng/messages';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ConfirmDialogModule,
    ButtonModule,
    MessagesModule,
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

输出:

Angular PrimeNG ConfirmDialog Basic

示例2：下面是另一个示例代码，说明了Angular PrimeNG ConfirmDialog Basic使用删除按钮的情况。

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG ConfirmDialog Basic</h5>
  
<p-confirmDialog 
    [style]="{ width: '30vw' }">
</p-confirmDialog>
  
<p-button 
    (click)="decision()" 
    icon="pi pi-times" 
    label="Delete GfG course ?">
</p-button>
  
<p-messages 
    [value]="ToastMessages">
</p-messages>

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';
import { Message } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [],
  providers: [ConfirmationService],
})
export class AppComponent {
  ToastMessages: Message[];
  
  constructor(
    private confirmationService: ConfirmationService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  decision() {
    this.confirmationService.confirm({
      message: 'Confirm deleting this course?',
      header: 'GeeksfoGeeks',
      icon: 'pi pi-info-circle',
      accept: () => {
        this.ToastMessages = [
          {
            severity: 'success',
            summary: 'Success!',
            detail: 'You have deleted this course!',
          },
        ];
      },
      reject: () => {
        this.ToastMessages = [
          {
            severity: 'info',
            summary: 'Fail!',
            detail: 'You have not deleted this course!',
          },
        ];
      },
    });
  }
}

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 { MessagesModule } from 'primeng/messages';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ConfirmDialogModule,
    ButtonModule,
    MessagesModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
  
export class AppModule {}

输出:

Angular PrimeNG ConfirmDialog Basic