使用带有 angular2 的烤面包机答案

【问题标题】：Use toastr with angular2使用带有 angular2 的烤面包机
【发布时间】：2016-03-16 16:54:36
【问题描述】：

我正在使用这个节点包link

按照说明，打字稿编译器会忘记。我认为问题与here 描述的相同，但我找不到解决方法。

有什么帮助吗？

非常感谢

【问题讨论】：

我可以在 plunker 中显示没有节点的情况吗？
另一种方法是使用原生 Angular2 烤面包机端口，例如 github.com/Stabzs/Angular2-Toaster
我目前正在使用@DavidL 提到的这个，它就像一个魅力。

标签： angular toastr

【解决方案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。

【讨论】：

谢谢，但是这样我如何配置选项？我在我的根组件中尝试使用 toastr.options = { positionClass: 'toast-bottom-right', } 但没有运气。编辑：如果我在显示之前设置选项，这有效。但是我想设置的选项是全局的方式。非常感谢
谢谢你，还有一个问题：我在 DefinitelyTyped/DefinitelyTyped 中找不到 toastr。我只找到了'ng-version'。你知道为什么吗？我也想用 bower 下载（我不能用 cdn），这可能吗？
你确定吗？见github.com/DefinitelyTyped/DefinitelyTyped/blob/master/toastr/…。是的，您可以从 bower 获取 toaster lib，并将其从 bower_components 文件夹中包含在您的 HTML 页面中...
再次感谢。 GitHub 已经截断了文件列表，这是错过的原因
@ThierryTemplier，当我们离开屏幕时，有没有办法删除警报消息？

【解决方案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; 
```

将以下代码添加到 providers 数组中

{ provide : Toaster_Token , useValue : toastr }

在您的组件中，从 angular/core 导入 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

【讨论】：

不完全理解做 7 步而不是 2 步：声明 let toastr 然后将 ToastrService 注入组件。请解释
您使用的是哪个版本？
角 5 。 "@angular/core": "^5.2.9"
不透明标记从 angular 4 中移除

【解决方案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;
   // ...

【讨论】：

【解决方案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');
  }
}

【讨论】：

如果对你有帮助的话。