极客教程Angular PrimeNG ConfirmDialog位置
Angular PrimeNG是一个与angular一起使用的框架，用于创建具有出色风格的组件，这个框架非常容易使用，用于制作响应式网站。本文将告诉我们如何在Angular PrimeNG中使用**ConfirmDialog位置。
ConfirmDialog组件用于制作一个包含确认按钮的对话框来确认元素。
Angular PrimeNG ConfirmDialog位置属性：
- style。它是该组件的内联风格。它是对象数据类型，默认值为空。
- styleClass。它是组件的风格类。它是字符串数据类型，默认值为空。
- acceptButtonStyleClass。它用于设置接受按钮的风格类。它是字符串数据类型，默认值为空。
- rejectButtonStyleClass。它用于设置拒绝按钮的样式类。它是字符串数据类型，默认值为空。
- icon。它是显示在信息旁边的图标。它是字符串数据类型，默认值为空。
- header。它是对话框的标题文本。它是字符串数据类型，默认值为空。
- accept。它是行动被确认时执行的回调。
- reject。它是当一个动作被拒绝时执行的回调。
- message。它是确认的信息。它是字符串数据类型，默认值为空。
- key。这是可选的键，用于匹配确认对话框的键。它是字符串数据类型，默认值为空。
语法:
<p-button
(click)="..."
label="...">
</p-button>
<p-confirmDialog
[style]="..."
key="..."
[position]="...">
</p-confirmDialog>
<p-messages
[value]="ToastMessages">
</p-messages>
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
运行以下命令以查看输出。
ng serve --open
示例1：下面的示例代码说明了Angular PrimeNG ConfirmDialog Position使用left ，和right位置。
<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG ConfirmDialog Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<p-button
(click)="decidePos('left')"
label="Get left DialogBox">
</p-button>
<p-button
(click)="decidePos('right')"
label="Get right DialogBox"
class="p-ml-3">
</p-button>
</div>
<p-confirmDialog
[style]="{ width: '60vw' }"
key="dialogPos"
[position]="pos">
</p-confirmDialog>
<p-messages
[value]="ToastMessages">
</p-messages>
</div>
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[];
pos: string;
constructor(
private confirmationService: ConfirmationService
) {}
decidePos(pos: string) {
this.pos = pos;
this.confirmationService.confirm({
message: 'Do you want to buy this course ?',
header: 'GeeksforGeeks',
icon: 'pi pi-info-circle',
accept: () => {
this.ToastMessages = [
{
severity: 'success',
summary: 'Confirmed!',
detail: 'You have bought this course.',
},
];
},
reject: () => {
this.ToastMessages = [
{
severity: 'info',
summary: 'Failure',
detail: 'OOPs! Try buying course next time.',
},
];
},
key: 'dialogPos',
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
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 { }
输出:
示例2：下面是另一个示例代码，说明了Angular PrimeNG ConfirmDialog Position使用Top,和bottom位置的用法。
<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG ConfirmDialog Position</h5>
<div class="p-grid p-dir-col">
<div class="p-col">
<p-button
(click)="decidePos('top')"
label="Get Top DialogBox">
</p-button>
</div>
<div class="p-col">
<p-button
(click)="decidePos('bottom')"
label="Get Bottom DialogBox">
</p-button>
</div>
<p-confirmDialog
[style]="{ width: '60vw' }"
key="dialogPos"
[position]="pos">
</p-confirmDialog>
<p-messages
[value]="ToastMessages">
</p-messages>
</div>
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[];
pos: string;
constructor(
private confirmationService: ConfirmationService
) {}
decidePos(pos: string) {
this.pos = pos;
this.confirmationService.confirm({
message: 'Do you want to buy this course ?',
header: 'GeeksforGeeks',
icon: 'pi pi-info-circle',
accept: () => {
this.ToastMessages = [
{
severity: 'success',
summary: 'Confirmed!',
detail: 'You have bought this course.',
},
];
},
reject: () => {
this.ToastMessages = [
{
severity: 'info',
summary: 'Failure',
detail: 'OOPs! Try buying course next time.',
},
];
},
key: 'dialogPos',
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
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 {}
输出:
