抠丁客 抠丁客
项目
编辑 (2025/12/24)

确认弹窗

您可以使用@abp/ng.theme.shared包中的ConfirmationService，通过在项目根层级放置来显示确认弹窗。

快速开始

您无需在组件级别提供ConfirmationService，因为它已经在根级别提供。您可以直接在组件、指令或服务中注入并立即使用它。

import { ConfirmationService } from '@abp/ng.theme.shared';
import { inject } from '@angular/core';

@Component({
  /* 此处为类元数据 */
})
class DemoComponent {
  private confirmation = inject(ConfirmationService);
}

使用方法

您可以使用ConfirmationService的success、warn、error和info方法来显示确认弹窗。

如何显示确认弹窗

const confirmationStatus$ = this.confirmation.success("消息内容", "标题");
  • ConfirmationService方法接受三个参数：message（消息）、title（标题）和options（选项）
  • success、warn、error和info方法返回一个RxJS Subject用于监听确认弹窗关闭事件。事件值的类型为Confirmation.Status，这是一个枚举类型

如何监听关闭事件

您可以像下面这样订阅确认弹窗的关闭事件：

import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
import { inject } from '@angular/core';

// 在类内部：
private confirmation = inject(ConfirmationService);

this.confirmation
  .warn('::WillBeDeleted', { key: '::AreYouSure', defaultValue: '确定吗？' })
  .subscribe((status: Confirmation.Status) => {
    // 在此处编写您的代码
  });
  • message和title参数接受字符串、本地化键或本地化对象。请参阅本地化文档
  • Confirmation.Status是一个枚举，包含三个属性：
    • Confirmation.Status.confirm - 当通过确认按钮关闭弹窗时发出的事件值
    • Confirmation.Status.reject - 当通过取消按钮关闭弹窗时发出的事件值
    • Confirmation.Status.dismiss - 当通过按ESC键或点击背景关闭弹窗时发出的事件值

如果您不关心确认状态，不需要订阅返回的可观察对象：

this.confirmation.error("您未被授权。", "错误");

如何显示带选项的确认弹窗

可以通过第三个参数向success、warn、error和info方法传递选项：

const options: Partial<Confirmation.Options> = {
  hideCancelBtn: false,
  hideYesBtn: false,
  dismissible: false,
  cancelText: "关闭",
  yesText: "确认",
  messageLocalizationParams: ["Demo"],
  titleLocalizationParams: [],
  // 您可以自定义图标
  // icon: 'fa fa-exclamation-triangle', // 或者
  // iconTemplate : '<img src="https://koudingke.oss-cn-hangzhou.aliyuncs.com/docs/abp-docs/zh-Hans/framework/ui/angular/custom-image-path.jpg"/>'
};

this.confirmation.warn(
  "AbpIdentity::RoleDeletionConfirmationMessage",
  "确定吗？",
  options
);
  • hideCancelBtn选项在设为true时隐藏取消按钮。默认值为false
  • hideYesBtn选项在设为true时隐藏确认按钮。默认值为false
  • dismissible选项允许通过按ESC键或点击背景来关闭确认弹窗。默认值为true
  • cancelText是取消按钮的文本。可以传递本地化键或本地化对象。默认值为AbpUi::Cancel
  • yesText是确认按钮的文本。可以传递本地化键或本地化对象。默认值为AbpUi::Yes
  • messageLocalizationParams是消息本地化的插值参数
  • titleLocalizationParams是标题本地化的插值参数
  • icon是图标的自定义类。默认值为undefined
  • iconTemplate是图标的模板。默认值为undefined

使用上述选项后，确认弹窗将如下所示：

confirmation

您可以将HTML字符串作为标题、消息或按钮文本传递。以下是一个示例：

const options: Partial<Confirmation.Options> = {
  yesText: '<i class="fa fa-trash mr-1"></i>是，删除它',
};

this.confirmation.warn(
  `
    <strong>角色演示</strong>将被<strong>删除</strong>
    <br>
    您确认吗？
  `,
  '<span class="my-custom-title">确定吗？</span>',
  options
);

由于现在值是HTML格式，需要手动处理本地化。请查看LocalizationService了解如何实现这一点。

请注意，所有字符串都将由Angular进行清理，并非所有HTML字符串都能正常工作。只有被Angular认为是"安全"的值才会被显示。

如何移除确认弹窗

可以通过clear方法手动移除打开的确认弹窗：

this.confirmation.clear();

如何更改确认弹窗的图标

您可以在app.config.ts中的provideAbpThemeShared函数内使用withConfirmationIcon()方法来更改图标。更改将影响项目中的所有确认弹窗。

import {
  provideAbpThemeShared,
  withConfirmationIcon,
} from "@abp/ng.theme.shared";

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideAbpThemeShared(
      withConfirmationIcon({
        info: 'fa fa-info-circle',
        success: 'fa fa-check-circle',
        warning: 'fa fa-exclamation-triangle',
        error: 'fa fa-times-circle',
        default: 'fa fa-question-circle',
      })
    ),
  ],
};

API

success

success(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Confirmation.Options>,
): Observable<Confirmation.Status>

请参阅LocalizationParam类型和Confirmation命名空间

warn

warn(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Confirmation.Options>,
): Observable<Confirmation.Status>

error

error(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Confirmation.Options>,
): Observable<Confirmation.Status>

info

info(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Confirmation.Options>,
): Observable<Confirmation.Status>

clear

clear(
  status: Confirmation.Status = Confirmation.Status.dismiss
): void
  • status参数是确认关闭事件的值
在本文档中