Toast Overlay

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

你可以使用 ToasterService 的 success, warn, error 和 info 方法显示一个overlay.

this.toaster.success('Message', 'Title');

• ToasterService 方法接收三个参数,分别是 message, title, 和 options.
• success, warn, error, 和 info 方法返回一个已打开的 toast overlay Id. 可以使用此id删除toast.

如何显示具有给定选项的Toast Overlay

import { Toaster, ToasterService } from '@abp/ng.theme.shared';
//...
constructor(private toaster: ToasterService) {}
//...
    life: 10000,
    sticky: false,
    closable: true,
    tapToDismiss: true,
    messageLocalizationParams: ['Demo', '1'],
    titleLocalizationParams: []
  };
  this.toaster.error('AbpUi::EntityNotFoundErrorMessage', 'AbpUi::Error', options);

• life 选项是关闭的时间毫秒数. 默认值是 5000.
• sticky 选项为 true 时忽略 life 选项,将toast overlay留在屏幕上. 默认值是 false.
• closable 选项为 true 时在toast overlay上显示关闭图标. 默认值是 true.
• tapToDismiss 选项为 true 允许通过单击关闭toast overlay. 默认值是 false.
• yesText 是确定按钮的文本,可以传递本地化键或本地化对象. 默认值是 AbpUi::Yes.
• messageLocalizationParams 是用于消息本地化的插值参数.
• titleLocalizationParams 是标题本地化的插值参数.

使用上面的选项,toast overlay看起来像这样:

如何删除 Toast Overlay

可以手动调用 clear 方法删除所有的已打开的toasts.

success

success(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

• Config 命令空间可以从 @abp/ng.core 导入.
• Toaster 命令空间可以从 @abp/ng.theme.shared 导入.

warn

error(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

info

info(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

remove

clear(): void

删除所有打开的toasts.

• Confirmation Popup