根据消息类型设置 toastr 选项 (Aurelia)答案

【问题标题】：Set toastr options depending on message type (Aurelia)根据消息类型设置 toastr 选项 (Aurelia)
【发布时间】：2019-10-07 13:12:38
【问题描述】：

尝试将此项目中的错误类型消息设置为比其他类型的消息具有更长的淡出时间。我使用 Aurelia 作为框架。

我目前的 toastr 选项设置如下：

app.js

@inject(Endpoint.of('api'), Router, FetchConfig, AppRouterConfig, AuthService, EventAggregator)
export class App {
  constructor(api, router, fetchConfig, appRouterConfig, authService, EventAggregator) {
    this.api = api;
    this.router = router;
    this.fetchConfig = fetchConfig;
    this.appRouterConfig = appRouterConfig;
    this.authService = authService;
    this.ea = EventAggregator;

    /* Define the options for the toastr messages */
    toastr.options = {
      "closeButton": true,
      "debug": false,
      "newestOnTop": false,
      "progressBar": false,
      "positionClass": "toast-top-full-width",
      "preventDuplicates": false,
      "onclick": null,
      "showDuration": "500",
      "hideDuration": "1000",
      "timeOut": "5000", // I want this to be 20000 for error-type messages ONLY
      "extendedTimeOut": "1000",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }
  };

我正在使用 Aurelia 的 pub/sub 以便在需要时生成 toastr 消息。我已将 toastr 订阅放在 App 类的 attach() 生命周期挂钩中：

app.js

this.toastSubscription = this.ea.subscribe('toast', toast => {
  toastr[toast.type](toast.message);
});

然后，在项目中我需要 toastr 消息的其他任何地方，我都会使用此发布：

example.js

  /* For an error */
  this.ea.publish('toast', {
    type: 'error',
    message: 'Some fancy error message',
  });

  /* For a success */
  this.ea.publish('toast', {
     type: 'success',
     message: 'Much success, very achieved, wow'
  })

如何设置此系统以处理具有较长淡出的错误类型消息？我试过这个似乎没有用：

app.js

  /* Modify the subscription to accept timeOut as an override of global options */
  this.toastSubscription = this.ea.subscribe('toast', toast => {
    toastr[toast.type](toast.message, {timeOut: toast.timeout});
  });

example.js

  this.ea.publish('toast', {
    type: 'error',
    message: 'Errors are love, errors are life',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

但是以上都没有成功。

有什么想法吗？

【问题讨论】：

标签： javascript aurelia toastr

【解决方案1】：

最后一个例子已经很接近了。

 this.ea.publish('toast', {
    type: 'error',
    message: 'Errors are love, errors are life',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

您将选项作为第二个参数，但它们是第三个。

 this.ea.publish('toast', '', {
    type: 'error',
    message: 'Errors are love, errors are life',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

第二个参数是标题，如果您不想要标题，请留空，然后将您的选项作为第三个

【讨论】：

不幸的是，这不起作用。 publish 方法接受两个参数；事件和数据。问题与订阅的设置方式有关，即：toastr[toast.type](toast.message, {timeOut: toast.timeout});

【解决方案2】：

好吧，Ducker 正在做某事......原来是需要使用 3 个参数的情况，但它不是在发布上，而是在订阅上：

app.js

this.toastSubscription = this.ea.subscribe('toast', toast => {
  /* Empty string passed in after toast.message */
  toastr[toast.type](toast.message, '', {timeOut: toast.timeout});
});

example.js

  this.ea.publish('toast', {
    type: 'error',
    message: 'Oh no, an Error!',
    timeout: 10000 // Pass in a longer timeOut than for other messages
  });

【讨论】：