页面提示

页面提示功能非常适合向用户展示重要消息。ABP框架提供了一种简便的方式来显示如下所示的提示信息。

您只需从@abp/ng.theme.shared导入PageAlertService并按如下方式使用：

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

@Component({
  // ...
})
export class MyComponent {
  private service = inject(PageAlertService);

  显示警告() {
    this.service.show({
      类型: 'warning',
      消息: '我们将在2023年10月23日凌晨02:00至04:00期间进行服务中断维护！',
      标题: '服务中断通知',
    });
  }
}

SHOW方法

show方法接收一个PageAlert类型的对象参数：

export interface PageAlert {
  类型: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
  消息: string;
  标题?: string;
  可关闭?: boolean;
  消息本地化参数?: string[];
  标题本地化参数?: string[];
}

• 类型（必需）：定义要显示的提示类型
• 消息（必需）：要显示的消息内容，支持本地化功能
• 标题（可选）：消息标题。如果未提供，标题将隐藏
• 可关闭（可选）：默认值为true。启用后，右上角将显示关闭按钮，用户可手动关闭消息
• 消息本地化参数和标题本地化参数（可选）：当消息和/或标题是本地化服务的键值并包含参数时，可使用这些字段传递参数

本地化示例

this.service.show({
  类型: 'danger',
  消息: 'AbpAccount::分页信息{0}{1}{2}',
  消息本地化参数: ['10', '20', '30'],
  标题: 'AbpAccount::实体未找到错误信息',
  标题本地化参数: ['测试', 'id123'],
});

渲染HTML内容

我们可以向标题和消息参数传递HTML内容：

• 支持静态消息或本地化键值
• abpSafeHtml管道会对HTML值进行安全处理

this.service.show({
  类型: 'success',
  标题: `新<i><u>博客</u></i>已发布`,
  消息: 'AbpApp::带参数HTML消息{0}',
  消息本地化参数: ['管理员'],
});