单击Angular2-toaster弹出窗口时如何处理事件答案

【问题标题】：How to handle the event when click on Angular2-toaster pop-up单击Angular2-toaster弹出窗口时如何处理事件
【发布时间】：2017-04-20 18:20:34
【问题描述】：

目前，我正在做一个使用 angular2-toaster 的项目。

// Show message notification
  this.toasterService.pop('success',
    `New message from ${data.sender.name} (${data.sender.hid})`,
    data.message);

当用户单击弹出窗口时，我想显示对话框以获取更多详细信息。我在https://www.npmjs.com/package/angular2-toaster 上搜索了文档但是当用户单击弹出窗口时找不到处理事件的解决方案，您能给我一些建议吗？

非常感谢。

【问题讨论】：

试试

标签： angular angular2-toaster

【解决方案1】：

您可以使用clickHandler。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toaster-container [toasterconfig]="config1"></toaster-container>
      <button (click)="popToast()">pop toast</button><br/>
    </div>
  `,
})
export class App {
  private toasterService: ToasterService;

  constructor(toasterService: ToasterService) {
    this.toasterService = toasterService;
  }

  popToast() {
    var toast: Toast = {
      type: 'info',
      title: 'Here is a Toast Title',
      body: 'Here is a Toast Body',
      showCloseButton: true,
      clickHandler: (t, isClosed): boolean => {
        console.log('i am clicked..', isClosed, t);

        // got clicked and it was NOT the close button!
        if (!isClosed) {

        }

        return true; // remove this toast !
      }
    };

    this.toasterService.pop(toast);
  }
}

现场演示：http://plnkr.co/edit/uL98EbfIBd6pm7bMU80V?p=preview

【讨论】：

耶！查看我的更新.. 照顾关闭按钮。
谢谢，我觉得clickHandler函数我们需要返回一个布尔值，作为ClickHandler的接口：export interface ClickHandler { (toast: Toast, isCloseButton?: boolean): boolean; }
是的，如果你返回true，吐司将被删除：github.com/Stabzs/Angular2-Toaster/blob/…

【解决方案2】：

从doc，你有onShowCallback：

var toast: Toast = {
  type: 'success',
  title: 'parent',
  onShowCallback: (toast) => {
    // stuff here
  }  
};

this.toasterService.pop(toast);

【讨论】：

谢谢你，Soywod！