Toast Overlay

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

入门

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

  1. import { ToasterService } from '@abp/ng.theme.shared';
  2. @Component({
  3. /* class metadata here */
  4. })
  5. class DemoComponent {
  6. constructor(private toaster: ToasterService) {}
  7. }

用法

你可以使用 ToasterServicesuccess, warn, errorinfo 方法显示一个overlay.

如何显示一个Toast Overlay

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

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

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

  1. import { Toaster, ToasterService } from '@abp/ng.theme.shared';
  2. //...
  3. constructor(private toaster: ToasterService) {}
  4. //...
  5. const options: Partial<Toaster.ToastOptions> = {
  6. life: 10000,
  7. sticky: false,
  8. closable: true,
  9. tapToDismiss: true,
  10. messageLocalizationParams: ['Demo', '1'],
  11. titleLocalizationParams: []
  12. };
  13. 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

如何删除 Toast Overlay

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

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

如何删除所有的Toasts

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

  1. this.toaster.clear();

API

success

  1. success(
  2. message: Config.LocalizationParam,
  3. title: Config.LocalizationParam,
  4. options?: Partial<Toaster.ToastOptions>,
  5. ): number
  • Config 命令空间可以从 @abp/ng.core 导入.
  • Toaster 命令空间可以从 @abp/ng.theme.shared 导入.

请参见Config.LocalizationParam类型Toaster namespace

warn

  1. warn(
  2. message: Config.LocalizationParam,
  3. title: Config.LocalizationParam,
  4. options?: Partial<Toaster.ToastOptions>,
  5. ): number

error

  1. error(
  2. message: Config.LocalizationParam,
  3. title: Config.LocalizationParam,
  4. options?: Partial<Toaster.ToastOptions>,
  5. ): number

info

  1. info(
  2. message: Config.LocalizationParam,
  3. title: Config.LocalizationParam,
  4. options?: Partial<Toaster.ToastOptions>,
  5. ): number

remove

  1. remove(id: number): void

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

clear

  1. clear(): void

删除所有打开的toasts.

另请参阅

确认弹层?