Question

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

我目前的烤面包机选项设置如下：

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

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

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

根据消息类型设置烤面包机选项（Aurelia）

2 个答案: