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

Question

正在尝试将此项目中的错误类型消息设置为比其他类型的消息具有更长的淡出时间。我正在使用 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 class:

的 attached() 生命周期挂钩中

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

但是上面一直没有成功

有什么想法吗？

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

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

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

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

Set toastr options depending on message type (Aurelia)

javascript

toastr

aurelia