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