|
|
# Toast Overlay
|
|
|
|
|
|
你可以通常将@abp/ng.theme.shared包提供的 `ToasterService` 放置在你项目的根级别下以覆盖显示消息.
|
|
|
|
|
|
## 入门
|
|
|
|
|
|
你不必在模块或组件级别提供 `ToasterService`,它已经在**根**级别提供,你可以在你的组件,指令或服务直接注入并使用它.
|
|
|
|
|
|
```js
|
|
|
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
|
|
|
|
|
|
```js
|
|
|
this.toaster.success('Message', 'Title');
|
|
|
```
|
|
|
|
|
|
- `ToasterService` 方法接收三个参数,分别是 `message`, `title`, 和 `options`.
|
|
|
- `success`, `warn`, `error`, 和 `info` 方法返回一个已打开的 toast overlay Id. 可以使用此id删除toast.
|
|
|
|
|
|
### 如何显示具有给定选项的Toast Overlay
|
|
|
|
|
|
选项可以作为第三个参数传递给`success`, `warn`, `error`, 和 `info` 方法:
|
|
|
|
|
|
```js
|
|
|
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`删除.
|
|
|
|
|
|
```js
|
|
|
const toastId = this.toaster.success('Message', 'Title')
|
|
|
|
|
|
this.toaster.remove(toastId);
|
|
|
```
|
|
|
|
|
|
### 如何删除所有的Toasts
|
|
|
|
|
|
可以手动调用 `clear` 方法删除所有的已打开的toasts.
|
|
|
|
|
|
```js
|
|
|
this.toaster.clear();
|
|
|
```
|
|
|
|
|
|
## API
|
|
|
|
|
|
### success
|
|
|
|
|
|
```js
|
|
|
success(
|
|
|
message: Config.LocalizationParam,
|
|
|
title: Config.LocalizationParam,
|
|
|
options?: Partial<Toaster.ToastOptions>,
|
|
|
): number
|
|
|
```
|
|
|
|
|
|
- `Config` 命令空间可以从 `@abp/ng.core` 导入.
|
|
|
- `Toaster` 命令空间可以从 `@abp/ng.theme.shared` 导入.
|
|
|
|
|
|
> 请参见[`Config.LocalizationParam`类型](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46)和[`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
|
|
|
|
|
|
### warn
|
|
|
|
|
|
```js
|
|
|
warn(
|
|
|
message: Config.LocalizationParam,
|
|
|
title: Config.LocalizationParam,
|
|
|
options?: Partial<Toaster.ToastOptions>,
|
|
|
): number
|
|
|
```
|
|
|
|
|
|
### error
|
|
|
|
|
|
```js
|
|
|
error(
|
|
|
message: Config.LocalizationParam,
|
|
|
title: Config.LocalizationParam,
|
|
|
options?: Partial<Toaster.ToastOptions>,
|
|
|
): number
|
|
|
```
|
|
|
|
|
|
### info
|
|
|
|
|
|
```js
|
|
|
info(
|
|
|
message: Config.LocalizationParam,
|
|
|
title: Config.LocalizationParam,
|
|
|
options?: Partial<Toaster.ToastOptions>,
|
|
|
): number
|
|
|
```
|
|
|
|
|
|
### remove
|
|
|
|
|
|
```js
|
|
|
remove(id: number): void
|
|
|
```
|
|
|
|
|
|
按给定的id移除打开的toast.
|
|
|
|
|
|
### clear
|
|
|
|
|
|
```js
|
|
|
clear(): void
|
|
|
```
|
|
|
|
|
|
删除所有打开的toasts.
|
|
|
|
|
|
## 另请参阅
|
|
|
|
|
|
- [Confirmation Popup](./Confirmation-Service.md)
|
|
|
|
|
|
## 确认弹层?
|
|
|
|
|
|
- [Config State](./Config-State.md)
|
