@dkachko/angular2-toaster

中文文档

15.0.1发布于 2023/04/27MITTypeScriptES Module近 30 天下载 7481

基于 AngularJS- Toaster 的 Angular Toaster 通知库

文档目录36 节

安装 :
导入 CSS
复制或链接 CSS
以 Sass 或小于 SSS 导入 CSS
汇编图书馆的SCSS
导入库
通过系统JS导入
通过 Webpack 导入
以默认配置开始 - NgModule( 建议) :
启动默认配置 - 手动组件包含( 过时 QQ 5. 0.0 ):
以配置覆盖开始 :
同步对同步烤面包机服务
自定义在流行中提示参数
清除已存在的吐司
动画
托拉斯类型
动画
限制
拨打解散
集装箱位置
关闭按钮
关闭 Html
顶上最新的烤面包
超时
防止鼠标超时
车体输出类型
进度栏
显示回调时
隐藏回调
点击回拨
我得到这个 No Toaster Containers have been initialized to receiv…
从错误处理器跳出时不显示托拉斯
作者
贷项
版权
许可证

角2号烤面包机

角2-托盘 是一个同步的、非屏蔽的、时间前期汇编支持的 Angular Toaster 通知库主要基于角形JS- Toaster 图像。。。 .

^11.0.0版本有一些新特征,类型定义,以及断裂变化. 请审查变化用于在升级前列出特性和打破更改.

^ 5. 0. 0. 版本要求任一 .forRoot() 或者说 .forChild() ToasterModule 列入。请读取 5.x.x 发布注释和 Getting Started 在升级前.

^4.0.0版本现在支持@angular/动画,这是一个突破性的更改. 请在升级前同时阅读“开始”和“动画”两个部分.

演示

可在下列地点找到动态角和打字演示这个平板电脑。。。 .

开始

安装 :

npm install angular2-toaster

导入 CSS

复制或链接 CSS

<link rel="stylesheet" type="text/css" href="/node_modules/angular2-toaster/toaster.css" />

或者说

<link rel="stylesheet" type="text/css" href="/node_modules/angular2-toaster/toaster.min.css" />

以 Sass 或小于 SSS 导入 CSS

@import 'node_modules/angular2-toaster/toaster';

汇编图书馆的SCSS

@import 'node_modules/angular2-toaster/toaster';

导入库

通过系统JS导入

内部 map 财产的财产 systemjs.config 文件,为角、 rxjs 添加映射 (这是一个依赖), 和 angular2-toaster 捆绑 umd 文件:

map: {
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      // ...
      // other libraries
      'rxjs':  'npm:rxjs',
      'angular2-toaster': 'npm:angular2-toaster/bundles/angular2-toaster.umd.js'

通过 Webpack 导入

只要跟随 Getting Started 命令导入库.

以默认配置开始 - NgModule( 建议) :

import {NgModule, Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule, ToasterService} from 'angular2-toaster';
import {Root} from './root.component'

@NgModule({
    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],
    declarations: [Root],
    bootstrap: [Root]
})

@Component({
    selector: 'root',
    template: `
            <toaster-container></toaster-container>
            <button (click)="popToast()">pop toast</button>`
})

export class Root {
    private toasterService: ToasterService;

    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;
    }

    popToast() {
        this.toasterService.pop('success', 'Args Title', 'Args Body');
    }
}

ToasterModule.forRoot() 它将保证一个单一的托斯特服务实例,确保所有接收容器都遵守同样的托斯特服务事件.

用于以后的列入,使用 ToasterModule.forChild() 提供 ToasterContainerComponent 只有,确保 ToasterService 仍作为根部单子持有.

启动默认配置 - 手动组件包含( 过时 QQ 5. 0.0 ):

import {Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterContainerComponent, ToasterService} from 'angular2-toaster';

@Component({
    selector: 'root',
    imports: [BrowserAnimationsModule],
    directives: [ToasterContainerComponent],
    providers: [ToasterService],
    template: `
        <toaster-container></toaster-container>
        <button (click)="popToast()">pop toast</button>`
})

class Root {
    private toasterService: ToasterService;
    
    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;    
    }
    
    popToast() {
        this.toasterService.pop('success', 'Args Title', 'Args Body');
    }
}

bootstrap(Root);

以配置覆盖开始 :

import {Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';

@Component({
    selector: 'root',
    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],
    template: `
        <toaster-container [toasterconfig]="config">
        </toaster-container>
        <button (click)="popToast()">pop toast</button>`
})

class Root {
    private toasterService: ToasterService;
    
    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;    
    }
    
    public config: ToasterConfig = 
        new ToasterConfig({
            showCloseButton: true, 
            tapToDismiss: false, 
            timeout: 0
        });
    
    popToast() {
        this.toasterService.pop('success', 'Args Title', 'Args Body');
    }
}

bootstrap(Root);

同步对同步烤面包机服务

ToasterService 以下列形式暴露出同步和同步的流行方法: pop() 财务报告和审定财务报表 popAsync() 页:1.

pop() 返回混凝土 Toast 土司的地产被水化所有接收集装箱都添加了土司.

popAsync() 返回热量 Observable<Toast> 可能签署接受多份祝酒更新.

自定义在流行中提示参数


var toast: Toast = {
    type: 'success',
    title: 'close button',
    showCloseButton: true
};

this.toasterService.pop(toast);

清除已存在的吐司

ToasterService 暴露一个 clear 函数接受两个可选参数: toastId 财务报告和审定财务报表 toastContainerId。。。 .

这些参数可以用来通过特定的id来清除吐司,通过容器id, 两者,或两者皆然。如果省去这两个参数,所有容器中的所有土司都将是已删除.

var toast = this.toasterService.pop('success', 'title', 'body');
this.toasterService.clear(toast.toastId, toast.toastContainerId);

动画

从版本开始 4.0.0 需要更大的动画配置,如 Getting Started 节.

要添加动画 :

安装 @angular/animations npm 软件包通过 npm install @angular/animations。。。 .

添加数据 BrowserAnimationsModule 转到您的根模块

import {NgModule, Component} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule} from 'angular2-toaster';

@NgModule({
    imports: [BrowserAnimationsModule, ToasterModule],
    ...

如果你想避免仅仅为了动画而增加一个模块,你可以明确配置 angular2-toaster 忽略动画。为此,导入 NoopAnimationsModule 相反:

import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {ToasterModule} from 'angular2-toaster';
    
@NgModule({
    imports: [NoopAnimationsModule, ToasterModule],
    ...

需要角动画浏览器支持 Web 动画标准。。。 .

如果您需要瞄准一个非支持的浏览器, a 多边填充需要时间.

可配置选项

托拉斯类型

默认情况下,5个土司类型是通过 ToastType 类型 : “ error” 、 “info” 、 “等待” 、 “ 成功” 和 “ 警告” .

现有的土司类型配置可以通过通过一个使用相同类型名称, 但覆盖样式类 :

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({typeClasses: {
      error: 'custom-toast-error',
      info: 'custom-toast-info',
      wait: 'custom-toast-wait',
      success: 'custom-toast-success',
      warning: 'custom-toast-warning'
    }});

此外,默认选项还可以被推翻、替换或扩展,方法是用一个自定义类型并将映射对象传递到配置中,其中密钥对应了土司类型和值对应自定义类 :

注:在提供自定义类型时,必须更新类型Classes和图标Classes两个对象. 如果两者均不提供,则土司类型将回落到 defaultToastType 哪个默认为 info。。。 .

import {DefaultTypeClasses, DefaultIconClasses} from 'angular2-toaster';
type ExtendedToastType = ('partial-success') & ToastType;

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

extendedTypeClasses = { ...DefaultTypeClasses, ...{ 'partial-success': 'toast-partial-success' }};
extendedIconClasses = { ...DefaultIconClasses, ...{ 'partial-success': 'icon-partial-success' }};

public config: ToasterConfig = 
    new ToasterConfig({
        typeClasses: <ExtendedToastType>this.extendedTypeClasses,
        iconClasses: <ExtendedToastType>this.extendedIconClasses
    });

动画

有五种动画风格可以通过烤面包机配置应用 animation 属性 : 平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平其他任何值都会禁用动画.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({animation: 'fade'});

限制

限制默认为无效, 也就是说没有定义最多多的土司在吐司容器开始去除吐司之前... ...当一个新的吐司被添加.

要改变这个行为, 请通过“ 限制” 选项到配置 :

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({limit: 5});

拨打解散

默认情况下 tapToDismiss 选项设置为正,这意味着如果在任何地方单击了祝酒词在吐司身体上, 吐司将被解雇。此行为可在配置中被覆盖如果设置为虚假, 只有关闭按钮被定义并点击时, 土司才会被删除 :

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({tapToDismiss: false});

集装箱位置

预建有9个烤面包机集装箱位置配置:

'toast-top-full-width', 'toast-bottom-full-width', 'toast-center',
'toast-top-left', 'toast-top-center', 'toast-top-right',
'toast-bottom-left', 'toast-bottom-center', 'toast-bottom-right'

默认, 'toast-top-right' 将被使用。您可以通过 positionClass 属性 :

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({positionClass: 'toast-top-left'});

关闭按钮

Close按钮的能见度可以配置在三个不同的级别:

从全球来看,所有土司类型都有:

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({showCloseButton: true});

每个信息类类型 : 通过将关闭按钮配置作为对象而不是布尔来传递,可以指定信息类类型的全局行为.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({
        showCloseButton: { 'warning': true, 'error': false }
    });

如果没有定义和指定一个类型,该类型的默认行为是虚假的.

通过 Toast 对象创建构建的每个土司 :
```
var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: 'Body text',
    showCloseButton: true
};

this.toasterService.pop(toast);
```
这个选项最受重视,并且将取代全球的土司配置。然而,它不会继续留在其他此类的土司上,也不会改变或污染全球布局.

关闭 Html

关闭的按钮html可以被全球覆盖,也可以被每个土司调用.

全球:

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({
        closeHtml: '<button>Close</button>'
    });

每个土司:

var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: 'Body text',
    showCloseButton: true,
    closeHtml: '<button>Close</button>'
};

this.toasterService.pop(toast);

顶上最新的烤面包

这个 newestOnTop 选项默认为真,在其它已有的土司上添加新的土司. 如果通过配置更改为虚假,会将土司添加到其他现存土司的底部.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({newestOnTop: false});

超时

默认情况下,土司的超时设置为5000个,也就是说它们会在5000个之后被移除毫秒长.

如果超时设定为超过0的,则会考虑吐司 "粘"而不会自动辞退.

超时可以配置在三个不同的级别:

从全球来看,所有土司类型都有:

template: 
  `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
      new ToasterConfig({timeout: 2000});

每个信息类类型 : 通过将超时配置选项传递为对象而不是数字,您可以指定全局信息类的行为应该有.

template: 
  `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({timeout: {error:1000});

如果一个类型没有定义和指定,则不会应用超时,使吐司"粘".

每道土司通过烤面包机. pop('success',"title","text")构造:

var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: 'Body text',
    showCloseButton: true,
    closeHtml: '<button>Close</button>'
};
      
this.toasterService.pop(toast);

防止鼠标超时

默认情况下,所有土司在计时器过期时都会被解职, 即使你鼠标在土司上.
这可以通过容器的配置来覆盖.

template: 
    `<toaster-container [toasterconfig]="config"></toaster-container>`

public config: ToasterConfig = 
    new ToasterConfig({mouseoverTimerStop: false});

车体输出类型

有三种不同的身体渲染方式可以通过 toast.bodyOutputType 参数 : “ 默认 ” 、 “ 信任 Html ” 和 “ 组件 ”。如果有的话 bodyOutputType 未提供,它将默认为“ 默认 ” .

默认: body 参数将作为文本内容直接插入。如果通过html 输入 body 参数,它将被编码成文本.

信任的 Httml : 该 body 参数将作为 html 内容解析和提供.

import {BodyOutputType} from 'angular2-toaster';
var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: '<h4>Body text</h4>',
    bodyOutputType: BodyOutputType.TrustedHtml
};
          
this.toasterService.pop(toast);

构成部分: body 参数是用作内容的组件类的名称祝酒词.

import {BodyOutputType} from 'angular2-toaster';

@Component({
  selector: 'dynamic-component',
  template: `<div>loaded via component</div>`
})
class DynamicComponent { }

var toast : Toast = {
    type: 'error',
    title: 'Title text',
    body: DynamicComponent,
    bodyOutputType: BodyOutputType.Component
};
          
this.toasterService.pop(toast);

构成部分 " 体积输出Type " 提供了额外的灵活性,即将土司实例附于你的组件。建议您在您的部件上曝光一个公共财产类型如果你需要用在你的组件内的话可以安全进入烤面包箱.
不建议改变吐司的情况.

进度栏

每个土司都可通过 progressBar 属性。如果设置为对, 则会有一个进度栏显示在土司被自动解除之前还有多少时间.

进步栏有两个方向: decreasing 或从左到右 increasing,或从左到右. 默认时改为 decreasing每个土司都会被推翻:

var toast: Toast = {
  type: 'success',
  progressBar: true,
  progressBarDirection: 'increasing'  
};

this.toasterService.pop(toast);

显示回调时

每个土司实例可附加一个 onShow回调功能. 吐司加起来后,将使用回调.

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onShowCallback: (toast) => this.toasterService.pop('success', 'invoked from ' + toast.title + ' onShow callback')  
};

this.toasterService.pop(toast);

隐藏回调

每个土司实例可附带一个在线回调功能。吐司撤走时,将援引回调.

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onHideCallback: (toast) => this.toasterService.pop('success', 'invoked from ' + toast.title + ' onHide callback')  
};

this.toasterService.pop(toast);

点击回拨

每个土司实例都可以附加一个 onClick回调功能. 敬酒时,将使用回调已点击,即使点击是关闭按钮。在去除吐司之前,会引用回调.

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onClickCallback: (toast) => this.toasterService.pop('success', 'invoked from ' + toast.title + ' onClick callback')  
};

this.toasterService.pop(toast);

构建源

为了建造Angular2-Toaster以促进发展,需要安装Git和Node.js.

切除回转的复制件:

git clone https://github.com/stabzs/Angular2-Toaster.git

在克隆目录中, 运行 :

npm install

运行角 AoT 编译器 :

npm run build

使用覆盖报告运行 Karma 测试实例 :

ng test angular2-toaster --code-coverage

经常被问到的问题

我得到这个 `No Toaster Containers have been initialized to receive toasts.` 错误

在尝试发布祝酒词之前,你没有适当地初始化一个烤面包机容器实例. 确定你已经完成了 toaster-container 组件和正在导入的组件页:1 ToasterModule 与 ToasterModule.forRoot()。。。 .

从错误处理器跳出时不显示托拉斯

这个 handleError 函数被执行到角区域以外的大小。你必须要明确告诉Angular在一个区的背景范围内运行流行调用.

export class AppErrorHandler implements ErrorHandler {
    constructor(
        private toasterService: ToasterService,
        private ngZone : NgZone) { }

    handleError(error: any): void {
        this.ngZone.run(() => {
            this.toasterService.pop('error', "Error", error);
        });  
    }
}

(看见这个伟大的) 堆叠过量流答覆详情请查阅.

作者

刺杀

贷项

重写自 https://github.com/jirikavi/AngularJS- Toaster 互联网档案馆的存檔,存档日期2013-12-02

灵感来自 http://codevii.github.io/toastr/demo.html 互联网档案馆的存檔,存档日期2013-12-12。。。 .

版权

许可证

这个项目根据麻省理工学院的许可证获得许可。见自由主义需要更多信息的文件.

版本与发布记录

@dkachko/angular2-toaster 共发布 4 个版本，首次发布于 2022/10/07；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`15.0.1`latest	2023/04/27	3 年前
`15.0.0`	2023/04/27	3 年前
`14.0.1`	2022/10/07	4 年前
`14.0.0`	2022/10/07	4 年前

关于 @dkachko/angular2-toaster 的常见问题

@dkachko/angular2-toaster 是什么？

基于 AngularJS- Toaster 的 Angular Toaster 通知库

如何安装 @dkachko/angular2-toaster？

在项目目录运行 npm install @dkachko/angular2-toaster，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（^15.0.0）、@angular/compiler（^15.0.0）、@angular/core（^15.0.0）、rxjs（^7.5.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@dkachko/angular2-toaster 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@dkachko/angular2-toaster 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。

@dkachko/angular2-toaster 可以商用吗？

@dkachko/angular2-toaster 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@dkachko/angular2-toaster 的下载量有多少？

根据 npm 官方下载统计，@dkachko/angular2-toaster 在 2026/10/13 – 2026/11/11 这 30 天内被下载 7,481 次，日均约 249 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@dkachko/angular2-toaster 还在维护吗？

最新版本 15.0.1 发布于 2023/04/27（3 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/10/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @dkachko/angular2-toaster

pnpmpnpm add @dkachko/angular2-toaster
yarnyarn add @dkachko/angular2-toaster
bunbun add @dkachko/angular2-toaster

peer 依赖@angular/common ^15.0.0@angular/compiler ^15.0.0@angular/core ^15.0.0rxjs ^7.5.0

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

7,481

约 7481 次日均 249 次

统计周期 2026/10/13 – 2026/11/11
数据来自 npm 官方下载统计，今天更新

最新版本15.0.1发布于 3 年前

开源许可MIT宽松许可

包体积323 kB36 个文件 · 解压后

运行依赖1 个另有 4 个 peer 依赖

模块格式ES Module无副作用，可 tree-shake

TypeScript自带类型

发布版本4 个近 12 个月 0 个

首次发布2022/10/074 年前

元数据更新2023/04/27

每一个软件包背后，
都有分享与创造的人。