angular - 带有 Angular 5 的原始 Toastr？

Question

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

注意:我知道有像 angular2-toaster 和其他一些 npm 包，但是当我尝试使用 Angular 5 CLI 安装和运行它们时，有很多错误消息，当我查看他们的 Github 页面时，他们有出色的问题，看起来 Ag5 有足够的突破性变化，但他们只是没有工作，没有分析源代码并破解它(显然我不是 npm 专家)。好像他们使用了 Ag4 但没有使用 Ag5？

既然 toastr 是一个标准的 JS 库，为什么我不能在 angluar-cli.json “脚本”中添加一个指向 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 }); }