确认弹层

你不必在模块或组件级别提供 ConfirmationService,它已经在根级别提供,你可以在你的组件,指令或服务直接注入并使用它.

你可以使用 ConfirmationService 的 success, warn, error 和 info 方法显示一个确认弹层.

const confirmationStatus$ = this.confirmation.success('Message', 'Title');

• ConfirmationService 方法接收三个参数,分别是 message, title, 和 options.
• success, warn, error, 和 info 方法返回一个RxJS Subject监听确认弹层关闭事件. 事件值类型是 枚举.

如何监听关闭事件

你可以订阅确认弹层关闭事件,例:

import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
constructor(private confirmation: ConfirmationService) {}
this.confirmation
  .warn('::WillBeDeleted', { key: '::AreYouSure', defaultValue: 'Are you sure?' })
  .subscribe((status: Confirmation.Status) => {
  });

• message 和 title 参数接收字符串,本地化Key或本地化对象. 参阅
• Confirmation.Status 是一个枚举,具有三个属性;
  • 是一个关闭事件值,当通过确认按钮关闭弹出窗口时触发此事件.
  • Confirmation.Status.reject 是一个关闭事件值,当通过取消按钮关闭弹出窗口时触发此事件.
  • Confirmation.Status.dismiss 是一个关闭事件值,当通过按Escape键关闭弹出窗口时触发此事件.

this.confirmation.error('You are not authorized.', 'Error');

如何显示具有给定选项的确认弹层

选项可以作为第三个参数传递给success, warn, error, 和 info 方法:

• hideCancelBtn 选项为 true 时隐藏取消按钮. 默认值为 false.
• hideYesBtn 选项为 true 时隐藏确认按钮. 默认值为 false.
• dismissible选项允许通过按Escape键或单击背景来取消确认弹出窗口. 默认值为 true.
• cancelText 是取消按钮的文本,可以传递本地化键或本地化对象. 默认值为 AbpUi::Cancel.
• yesText 是确定按钮的文本,可以传递本地化键或本地化对象. 默认值为 AbpUi::Yes.
• messageLocalizationParams是用于消息本地化的插值参数.
• titleLocalizationParams 是标题本地化的插值参数.

使用以上选项确认弹层窗口如下所示:

const options: Partial<Confirmation.Options> = {
  yesText: '<i class="fa fa-trash mr-1"></i>Yes, delete it',
};
this.confirmation.warn(
  `
    <br>
    Do you confirm that?
  '<span class="my-custom-title">Are you sure?</span>',
  options,
);

由于这些值现在是HTML,因此应该手动处理本地化. 参阅LocalizationService了解如何实现.

打开的确认弹出窗口可以通过 clear 方法手动删除:

this.confirmation.clear();

success

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

warn

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 参数是确认关闭事件的值.