Angular 5 的原始 Toastr？

Question

我喜欢原来的 toastr b/c 我可以弹出一条 "Item X Saved" 消息，并且在我重定向回主页后它会在页面上停留 X 毫秒。所以我想将原始的 toastr 库与 Angular 5 一起使用，但无法弄清楚。是否有博客 post 或在线示例显示此内容？

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

既然toastr是一个标准的JS库，为什么我不能直接在angluar-cli.json "scripts"中的min.js文件中添加一个link并显示一个像 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，您可以查看此 link 并按照说明进行操作，这将支持 angular 5

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

with angular 5 你可以使用外部CDN或者link

方法：1 为 toastr 安装 npm 包

npm install --save toastr

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

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

并在样式数组中导入您的 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 目前每周进行大约 8k 次下载).

我昨晚在我的 Angular 6 应用程序中安装了它（我在谷歌搜索同样的需求时遇到了你的问题），我在几分钟内完成了它运行没有构建警告或错误、未列出新的 npm 审计漏洞或任何其他问题。按照 "Setup" 下的简短说明进行操作，它就可以正常工作。

NPM link: https://www.npmjs.com/package/ngx-toastr

Angular 5 的原始 Toastr？

Original Toastr with Angular 5?

toastr

angular-toastr

angular