ng2-toastr 不能在角度 2 中工作答案

【问题标题】：ng2-toastr not working in angular 2ng2-toastr 不能在角度 2 中工作
【发布时间】：2017-08-09 07:54:16
【问题描述】：

我正在尝试在我的 Angular 2 应用程序中使用 ng2-toastr。我已按照所有说明进行操作，但 toastr 无法在没有任何控制台错误的情况下显示。我还在某处读到 ng-toastr 不再适用于 angular 2，但没有找到任何有效的文档。我搜索了类似的问题，但没有找到任何适合我的问题的答案。任何帮助将不胜感激。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import{ ToastModule} from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import "hammerjs"

import { CoreModule } from './core/core.module';

import { MODULE_ROUTES, MODULE_COMPONENTS } from './app.router'

@NgModule({
  declarations: [
    MODULE_COMPONENTS
],
imports: [
   BrowserModule,
   FormsModule,
   HttpModule,
   RouterModule.forRoot(MODULE_ROUTES),
   BrowserAnimationsModule,
   CoreModule,
   ToastModule.forRoot()
],
providers: [ ],
bootstrap: [MODULE_COMPONENTS]
})
export class AppModule { }

app.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';

@Component({
  selector: 'wow-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  constructor( public toastr: ToastsManager, private vRef: ViewContainerRef) 
  {
    this.toastr.setRootViewContainerRef(vRef);
    console.log(this.toastr);
  }

}

这就是我在其中一个组件中调用 toastr 方法的方式：

 login() {
   this.user_service.login(this.user).then((response) => {
     console.log(response)
     this.toastrManager.success('Successfully Logged in.')
   }

package.json

"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-image-upload": "^0.6.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"ng2-toastr": "^4.1.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
  "@angular/cli": "1.0.3",
  "@angular/compiler-cli": "^4.0.0",
  "@types/jasmine": "2.5.38" 
}

我还在 angular-cli.json 中添加了"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"。这是console.log

【问题讨论】：

你在 angular-cli.json 文件中添加了node_modules/ng2-toastr/bundles/ng2-toastr.min.js 文件吗？
我想在使用 webpack/angular-cli 时不需要这样做
但您必须为您在项目中使用的外部库添加js 文件。
不，我没有。它在他们的文档中提到。 '注意：如果您使用的是 angular-cli，则不需要包含 'node_modules/ng2-toastr/bundles/ng2-toastr.min.js'，因为添加了 'import {ToastModule} from 'ng2-toastr/ng2-toastr ';'到您的模块文件（如下）将允许它被自动加载。”
哦，好吧，抱歉我还没读到。

标签： angular angular-cli angular-toastr

【解决方案1】：

在您的 angular-cli.json 文件中，将此行添加到样式属性中

../node_modules/ng2-toastr/bundles/ng2-toastr.min.css

【讨论】：

【解决方案2】：

[更新]

我终于设法解决了这个问题，想与所有陷入同一问题的人分享。请更改以下代码

import { ToastsManager } from 'ng2-toastr/ng2-toastr';

到

import { ToastsManager } from 'ng2-toastr';

因为，ToastsManager 是从父目录而不是从子目录导出的（至少，在我使用的依赖项版本中）。

【讨论】：

你能和我分享一下你的烤面包机设置吗？

【解决方案3】：

我在玩 1hrs 时出现错误，最后我找到了以下
解决方案：
1. 首先您需要从
  复制“ng2-toastr.min.css” nodemodules-->ng2toaster 文件夹
2. 将此文件放入您的评估中，并在您的库中添加链接 “index.html”文件

  <link href="assets/css/ng2-toastr.min.css" rel="stylesheet" />

【讨论】：