4

我喜欢原来的 toastr b/c 我可以弹出一条“项目 X 已保存”消息，并且在我重定向回主页后它会在页面上停留 X 毫秒。所以我想在 Angular 5 中使用原始的 toastr 库，但无法弄清楚。是否有显示此内容的博客文章或在线示例？

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

既然 toastr 是一个标准的 JS 库，为什么我不能在 angluar-cli.json “脚本”中添加一个指向 min.js 文件的链接，并像 SPA 之前的美好时光一样显示一个标准的弹出窗口？今晚我已经下载了很多这样的 npm 库并与之抗争，似乎使用已经存在多年的标准库比应该的要困难得多。

谢谢。

4

3 回答 3

5

我强烈建议您使用Angular Material来做到这一点。

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

private constructor(private snacker: MatSnackBar) {}
// ...
toast() { this.snacker.open('Text to display', 'Button text', { duration: 2000 }); }
于 2017-12-11T08:05:05.257 回答
2

对于 toastr，您可以查看此链接并按照将支持角度 5 的说明进行操作

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

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

方法：1 为 toastr 安装 npm 包

npm install --save toastr

在脚本数组中的 .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;
于 2017-12-11T08:55:35.577 回答
2

ngx-toastr是最新的、受支持的并正在积极发布。截至发稿时，它每周在 NPM 上的下载量约为 31k，并且由于大约一年前从 ng2-toastr 切换名称，用户切换速度似乎很慢（ng2-toastr 目前每周下载量约为 8k ）。

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

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

于 2018-09-04T22:50:32.570 回答