Toast Overlay

你可以通常将@abp/ng.theme.shared包提供的 ToasterService 放置在你项目的根级别下以覆盖显示消息.

入门

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

import { ToasterService } from '@abp/ng.theme.shared';
@Component({
  /* class metadata here */
})
class DemoComponent {
  constructor(private toaster: ToasterService) {}
}

用法

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

如何显示一个Toast Overlay

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

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

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

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

import { Toaster, ToasterService } from '@abp/ng.theme.shared';
//...
constructor(private toaster: ToasterService) {}
//...
const options: Partial<Toaster.ToastOptions> = {
    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

已打开的toast overlay可以通过手动调用 remove 方法传递指定的 toast id删除.

const toastId = this.toaster.success('Message', 'Title')
this.toaster.remove(toastId);

如何删除所有的Toasts

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

this.toaster.clear();

API

success

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

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

请参见Config.LocalizationParam类型和Toaster namespace

warn

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

error

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

remove(id: number): void

按给定的id移除打开的toast.

clear

clear(): void

删除所有打开的toasts.

另请参阅

• Confirmation Popup

确认弹层?

• Config State