提示消息覆盖层

您可以使用 @abp/ng.theme.shared 包中的 ToasterService，通过将其放置在项目的根级别来在覆盖层中显示消息。

入门指南

您无需在组件级别提供 ToasterService，因为它已经在根级别提供。您可以直接在组件、指令或服务中注入并开始使用它。

import { ToasterService } from '@abp/ng.theme.shared';
import { inject } from '@angular/core';

@Component({
  /* 类元数据 */
})
class DemoComponent {
  private toaster = inject(ToasterService);
}

使用方法

您可以使用 ToasterService 的 success、warn、error 和 info 方法来显示覆盖层。

如何显示提示消息覆盖层

this.toaster.success("消息内容", "标题");

ToasterService 的方法接受三个参数：message（消息）、title（标题）和 options（选项）。
success、warn、error 和 info 方法返回已打开的提示消息覆盖层的 id。可以使用此 id 移除提示。

如何根据给定选项显示提示消息覆盖层

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

import { Toaster, ToasterService } from '@abp/ng.theme.shared';
import { inject } from '@angular/core';

// 在类内部
private toaster = inject(ToasterService);

//...
const options: Partial<Toaster.ToastOptions> = {
  life: 10000,
  sticky: false,
  closable: true,
  tapToDismiss: true,
  messageLocalizationParams: ['演示', '1'],
  titleLocalizationParams: [],
  iconClass: 'custom-icon-name'
};

this.toaster.error('AbpUi::EntityNotFoundErrorMessage', 'AbpUi::Error', options);

life 选项是关闭时间（毫秒）。默认值为 5000。
sticky 选项为 true 时，将忽略 life 选项，使提示消息覆盖层保持在屏幕上。默认值为 false。
closable 选项为 true 时，在提示消息覆盖层上显示关闭图标。默认值为 true。
tapToDismiss 选项为 true 时，允许通过点击提示消息覆盖层来关闭它。默认值为 false。
yesText 是确认按钮的文本。可以传递本地化键或本地化对象。默认值为 AbpUi::Yes。
messageLocalizationParams 是消息本地化的插值参数。
titleLocalizationParams 是标题本地化的插值参数。
iconClass 是分配给提示消息覆盖层上图标的 CSS 类。

使用上述选项，提示消息覆盖层如下所示：

如何移除提示消息覆盖层

可以通过 remove 方法并传递提示消息的 id 来手动移除打开的提示消息覆盖层：

const toastId = this.toaster.success("消息内容", "标题");

this.toaster.remove(toastId);

如何移除所有提示消息

可以通过 clear 方法手动移除所有打开的提示消息：

this.toaster.clear();

使用第三方提示库替换 ToasterService

如果您希望 ABP 使用第三方库来显示提示消息，而不是内置的提示库，您可以提供一个实现 Toaster.Service 接口的服务，并按如下方式提供（示例中使用 ngx-toastr 库）：

您可以使用 LocalizationService 来翻译提示消息。

// your-custom-toaster.service.ts
import { Injectable, inject } from '@angular/core';
import { Config, LocalizationService } from '@abp/ng.core';
import { Toaster } from '@abp/ng.theme.shared';
import { ToastrService } from 'ngx-toastr';

@Injectable()
export class CustomToasterService implements Toaster.Service {
  private toastr = inject(ToastrService);
  private localizationService = inject(LocalizationService)
  
  error(
    message: Config.LocalizationParam,
    title?: Config.LocalizationParam,
    options?: Partial<Toaster.ToastOptions>,
  ) {
    return this.show(message, title, 'error', options);
  }

  clear(): void {
    this.toastr.clear();
  }

  info(
    message: Config.LocalizationParam,
    title: Config.LocalizationParam | undefined,
    options: Partial<Toaster.ToastOptions> | undefined,
  ): Toaster.ToasterId {
    return this.show(message, title, 'info', options);
  }

  remove(id: number): void {
    this.toastr.remove(id);
  }

  show(
    message: Config.LocalizationParam,
    title: Config.LocalizationParam,
    severity: Toaster.Severity,
    options: Partial<Toaster.ToastOptions>,
  ): Toaster.ToasterId {
    const translatedMessage = this.localizationService.instant(message);
    const translatedTitle = this.localizationService.instant(title);
    const toasterOptions = {
      positionClass: 'toast-bottom-right',
      tapToDismiss: options.tapToDismiss,
      ...(options.sticky && {
        extendedTimeOut: 0,
        timeOut: 0,
      }),
    };
    const activeToast = this.toastr.show(
      translatedMessage,
      translatedTitle,
      toasterOptions,
      `toast-${severity}`,
    );
    return activeToast.toastId;
  }

  success(
    message: Config.LocalizationParam,
    title: Config.LocalizationParam | undefined,
    options: Partial<Toaster.ToastOptions> | undefined,
  ): Toaster.ToasterId {
    return this.show(message, title, 'success', options);
  }

  warn(
    message: Config.LocalizationParam,
    title: Config.LocalizationParam | undefined,
    options: Partial<Toaster.ToastOptions> | undefined,
  ): Toaster.ToasterId {
    return this.show(message, title, 'warning', options);
  }
}

// app.config.ts

import { ToasterService } from '@abp/ng.theme.shared';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
      {
        provide: ToasterService,
        useClass: CustomToasterService,
      },
  ],
};

API

success

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

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

参见 LocalizationParam 类型和 Toaster 命名空间

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 移除一个打开的提示消息。

clear

clear(): void

移除所有打开的提示消息。

另请参阅

确认弹窗