Use toastr with angular2

问题

I'm using this node package link

Following the instructions the typescript compiler gets out of mind. I think the problem is the same described here but I cant find a workaround.

Any help?

Thanks a lot

回答1:

This means that you can use directly the toastr object directly without having to import it like this: import * as toastr from '...';.

That said to avoid compilation error, you need to include the corresponding typings:

/// <reference path="./toaster.d.ts" />

Here is the way to use Toastr in a component:

/// <reference path="./toaster.d.ts" />

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app', 
  template: `
    <div (click)="displayToastr()">Display Toastr</div>
  `
})
export class AppComponent {
  constructor() {
    toastr.options = { positionClass: 'toast-bottom-right' };
  }

  displayToastr() {
    toastr.info('message');
  }
}

Here is the corresponding plunkr: https://plnkr.co/edit/wzdoisKBrZYTeSX8r7Nd?p=preview.

回答2:

Create a Toaster Service under any folder inside your application(preferably common) and add the below code in it
```
import { OpaqueToken } from '@angular/core'
export let Toaster_Token = new OpaqueToken('toastr');
```

Import this in your App module as below

import { Toaster_Token } from './ToasterService';

Declare a variable which has the refrence of window.toastr of the toastr.js as
```
declare let toastr : any; 
```

Add the below code into providers array

{ provide : Toaster_Token , useValue : toastr }

In your component, import the ToasterService and Inject from angular/core as below

import { Toaster_Token } from './ToasterService';
import { Inject} from '@angular/core';

Your constructor is injected with this service as

constructor(@Inject( Toaster_Token ) private _toasterService : any){

}

Use the toaster methods as

this._toasterService.success('This works');

LIVE DEMO

回答3:

if you use angular2-toaster (npm install angular2-toaster)

in html

<button class='btn btn-bar btn-warn' (click)='testToaster()'>testToaster</button>

in component.js

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ToasterModule, ToasterService, BodyOutputType } from "angular2-toaster";

@NgModule({
    imports: [ BrowserAnimationsModule, ToasterModule],
})

export class Democlass extends BaseComponent implements OnInit {
    constructor(...,
    private toasterService: ToasterService) {
. . .}

    public testToaster() {
    this.toasterService.pop("info", "Args Title info", "Args Body <p/>  sdf")
       .bodyOutputType = BodyOutputType.TrustedHtml;
}

you can also use other toast properties as

   let toast = this.toasterService.pop("info", "demo Title info", "demo Body <p/>  sdf");
   toast.bodyOutputType = BodyOutputType.TrustedHtml;        
   // these will be used
   toast.title = "Actual tite";
   toast.body = "new html body <i>italic</i><hr/>notes";
   // toast.clickHandler = ...
   // toast.type = "error";
   // toast.timeout = 20;
   // ...

回答4:

You just need to add <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

toastr - plunker

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app', 
    template: `
      <button (click)="displayToastr()">Display Toastr</button>
    `
})
export class AppComponent {
  displayToastr() {
    toastr.info('I am here for few seconds');
  }
}

来源：https://stackoverflow.com/questions/36042125/use-toastr-with-angular2

标签

angular

toastr