ng2-toastr不工作在角2。

I am trying to use ng2-toastr in my angular 2 app. I have followed all the instructions but the toastr fails to show up without any console error. I have also read somewhere that ng-toastr no longer works with angular 2 but have not found any valid documentation on that. I have searched for similar questions but have not found any suitable answer to my problem. any help would be appreciated.

我正在尝试在我的角2应用中使用ng2-toastr。我已经按照所有的说明，但是toastr没有出现任何控制台错误。我也读过关于ng-toastr不再适用于角2的文章，但是还没有找到任何有效的文献。我已经搜索了类似的问题，但没有找到适合我的问题的答案。如有任何帮助，我们将不胜感激。

app.module.ts

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

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);
  }

}

This is how I am calling toastr method in one of my components:

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

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

package.json

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" 
}

I have also added "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css" in my angular-cli.json. this is console.log

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

3 个解决方案

#1

In your angular-cli.json file, add this line in a styles property

在你angular-cli。json文件，在样式属性中添加这一行。

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

#2

[UPDATE]

(更新)

I finally managed to solve the problem, thought to share it with all those who are stuck in the same issue. Please change the following code

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

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

来

import { ToastsManager } from 'ng2-toastr';

since, the ToastsManager is exported from the parent directory and not from the subdirectory (atleast, in the versions of dependencies I am using).

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

#3

i am playing with error with 1hrs , finally i find the following
solution:

我正在用1hrs进行错误处理，最后我找到了以下解决方案:
1. first you need to copy the "ng2-toastr.min.css" from
  nodemodules-->ng2toaster folder
2. 首先需要复制“ng2-toastr.min”。css“从nodemodules - - > ng2toaster文件夹
3. put this file in yours assests ,and add link in yours base "index.html" file
4. 将此文件放入您的资产，并在您的基础“索引”中添加链接。html”文件

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

#1