Angular 5 的原始烤面包机？

Posted 2023-05-08

【中文标题】Angular 5 的原始烤面包机？

【英文标题】：Original Toastr with Angular 5?

【发布时间】：2018-05-24 16:51:17

【问题描述】：

我喜欢原始的 toastr b/c 我可以弹出“项目 X 已保存”消息，并且在我重定向回主页后它会在页面上停留 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 库并与之抗争，似乎使用已经存在多年的标准库比应该的要困难得多。

谢谢。

【参考方案1】：

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

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

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

【讨论】：

感谢您的回复。我正在使用 bootstrap 3。两者兼容吗？

是的。您不能将 Angular 材料视为 CSS 库。它更像是一个组件库，它为您提供了许多组件来简化您的工作。

【参考方案2】：

对于 toastr，您可以查看此链接并按照将支持 angular 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;

【参考方案3】：

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

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

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