Question

我喜欢原始的toastr b / c我可以弹出一个“Item X Saved”消息，它在我重定向回主页后停留在页面上X毫秒。所以我想使用Angular 5的原始toastr库，但无法弄明白。是否有博客文章或在线样本显示此内容？

注意：我知道有像angular2-toaster和其他一些npm软件包，但是当我尝试使用Angular 5 CLI安装和运行它们时，会有很多错误消息，当我查看他们的Github页面时，他们有出色的表现问题，似乎Ag5有足够的突破性变化，他们只是在没有分析源代码并将其破解的情况下还没有工作（我显然不是npm专家）。好像他们使用Ag4而不是使用Ag5？

由于toastr是一个标准的JS库，为什么我不能只在angluar-cli.json“scripts”中添加一个指向min.js文件的链接，并显示一个标准的弹出窗口，比如SPA之前的美好时光？我已经下载并与今天这么多的npm库进行了斗争，看起来使用已经存在多年的标准库比使用它要困难得多。

感谢。

Answer 1

我强烈建议你Angular Material这样做。

一旦你安装它（它适用于Angular 5并且安装程序很容易遵循），你只需要

private constructor(private snacker: MatSnackBar) {}
// ...
toast() { this.snacker.open('Text to display', 'Button text', { duration: 2000 }); }

Answer 2

对于toastr，您可以查看此链接并按照这将支持angular 5

的说明

https://www.primefaces.org/primeng/#/growl

使用角度5，您可以使用外部CDN或链接

方法：1 为toastr安装npm包

npm install --save toastr

脚本数组中的.angular-cli.json文件从已安装的节点模块导入脚本

 "../node_modules/...../toastr.min.js

并在styles数组中导入CSS文件

"../node_modules/...../toastr.min.css

如果这不起作用，请在index.html文件中包含CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>    
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />

并在组件中声明如下变量并开始使用https://github.com/CodeSeven/toastr中的原生toastr

declare var toastr;

Answer 3

ngx-toastr是最新的，受支持的并且正在积极发布。截至发布之时，它每周在NPM上进行约31k下载，由于大约一年前从ng2-toastr切换名称，看来用户切换的速度很慢（ng2-toastr目前每周进行约8000次下载）。

我昨晚在Angular 6应用中安装了它（在我搜索相同需求时遇到了您的问题），并且它在几分钟内就启动并运行，没有构建警告或错误，没有列出新的npm审核漏洞。，或其他任何问题。按照“设置”下的简要说明进行操作。

NPM链接：https://www.npmjs.com/package/ngx-toastr

原始Toastr与Angular 5？

3 个答案: