Question

我正在使用此节点包link

按照说明操作，打字稿编译器就不再适用了。我认为问题与here描述的相同，但我找不到解决方法。

任何帮助？

非常感谢

Answer 1

这意味着您可以直接使用toastr对象，而无需像下面这样导入import * as toastr from '...';。

那说为了避免编译错误，你需要包含相应的类型：

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

以下是在组件中使用Toastr的方法：

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

这是相应的plunkr：https://plnkr.co/edit/wzdoisKBrZYTeSX8r7Nd?p=preview。

Answer 2

在您的内部任意文件夹下创建一个Toaster服务应用程序（最好是常见的）并在其中添加以下代码
```
import { OpaqueToken } from '@angular/core'
export let Toaster_Token = new OpaqueToken('toastr');
```

在您的App模块中导入此内容，如下所示

import { Toaster_Token } from './ToasterService';

声明一个变量，该变量具有toastr.js的window.toastr的参考值
```
declare let toastr : any; 
```

将以下代码添加到提供程序数组

{ provide : Toaster_Token , useValue : toastr }

在您的组件中，从角度/核心导入ToasterService和Inject，如下所示

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

您的构造函数将作为

注入此服务

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

}

使用烤面包机方法

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

<强> LIVE DEMO

Answer 3

如果你使用angular2-toaster（npm install angular2-toaster）

html中的

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

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

您还可以使用其他Toast属性

   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;
   // ...

Answer 4

您只需添加<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');
  }
}

使用带有angular2的toastr

4 个答案: