无法在 Angular 5 中显示 Toast 消息答案

【问题标题】：Unable to display Toast message in Angular 5无法在 Angular 5 中显示 Toast 消息
【发布时间】：2018-10-23 03:57:08
【问题描述】：

您好，我正在 Angular 5 中开发 Web 应用程序。我正在尝试使用 https://www.npmjs.com/package/ngx-toastr 在 Angular 5 中显示 toast 消息。我已经下载了所需的 npm 模块并将 css 复制到 assets 文件夹。我也加了

从 'ngx-toastr' 导入 { ToastrModule };

在 app.component.ts 中。

我正在尝试将 toast 消息显示为

this.toastr.success('Hello world!', 'Toastr fun!');

当我运行我的解决方案时，出现以下错误。

当我运行 npm install 时，我收到以下警告，

有人可以帮我解决这个问题吗？任何帮助，将不胜感激。谢谢你。

【问题讨论】：

【解决方案1】：

确保您将 ToastrModule 导入到 app.module.ts

import {ToastrModule} from 'ngx-toastr';

在您的组件中，您需要导入提供程序

import { ToastrService } from 'ngx-toastr';

构造函数中的注入器作为DI

constructor(public toastr: ToastrService) {}

你可以调用它

this.toastr.success(message, 'Success!');

编辑

您需要移动到 angular6 才能使其工作。查看相关问题here

【讨论】：