无法在 Angular 5 中显示 Toast 消息

Question

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

import { ToastrModule } from 'ngx-toastr';

在 app.component.ts 中。

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

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

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

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

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

Answer 1

确保您在 app.module.ts

中导入了 ToastrModule

import {ToastrModule} from 'ngx-toastr';

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

import { ToastrService } from 'ngx-toastr';

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

constructor(public toastr: ToastrService) {}

您可以将其调用为

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

编辑

您需要移动到 angular6 才能使其正常工作。查看相关issue here

Unable to display Toast message in Angular 5