Angular Toastr中缺少ToastData

我在旧的Angular 5应用程序中实现了ng2 Toasty。我正在尝试使用ngx toastr，因为ng2 Toasty不支持常规8

如果你在下面看到，ngx toastr似乎没有ToastData的等价物

ng2烤面包

import { ToastyService, ToastyConfig, ToastOptions, ToastData } from 'ng2-toasty';

ngx toastr

import { ToastrService, ToastConfig, ToastOptions} from 'ngx-toastr';

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello Success!', 'Toastr fun!');
  }

  showError() {
    this.toastr.error('Hello Error!', 'Toastr fun!');
  }

  showInfo() {
    this.toastr.info('Hello Info!', 'Toastr fun!');
  }

  showWarning() {
    this.toastr.warning('Hello Warning!', 'Toastr fun!');
  }
}

这就是以前在代码中使用它的方式

var timeOutSeconds = message.timeOutSeconds ? message.timeOutSeconds * 1000 : 4000;

    let toastOptions: ToastOptions = {
      title: message.summary,
      msg: message.detail,
      timeout: isSticky ? 0 : timeOutSeconds
    };

    if (isSticky) {
          toastOptions.onAdd = (toast: ToastData) => this.stickyToasties.push(toast.id);

          toastOptions.onRemove = (toast: ToastData) => {
            let index = this.stickyToasties.indexOf(toast.id, 0);

            if (index > -1) {
              this.stickyToasties.splice(index, 1);
            }

            toast.onAdd = null;
            toast.onRemove = null;
          };
        }

---

你知道使用ngx toastr的等效实现是什么吗？当你使用ngx toastr时，你只需调用以下函数就可以显示一个toastr

import { ToastrService, ToastConfig, ToastOptions} from 'ngx-toastr';

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello Success!', 'Toastr fun!');
  }

  showError() {
    this.toastr.error('Hello Error!', 'Toastr fun!');
  }

  showInfo() {
    this.toastr.info('Hello Info!', 'Toastr fun!');
  }

  showWarning() {
    this.toastr.warning('Hello Warning!', 'Toastr fun!');
  }
}

这也将有助于您了解具体实施：

---

演示：

在文档中，有一个界面描述了您需要的方法； onShown、onHidden、onTap、onAction

导出接口ActiveToast{ /**您的Toast ID。使用此项单独关闭它*/ 蟾蜍：数字； /**您的祝酒词。存储以防止重复*/ 消息：字符串； /**组件的引用请参见portal.ts*/ 门户：ComponentRef； /**提及你的祝酒词*/ 烤面包片：烤面包片； /**当toast处于活动状态时触发*/ onShown：可观察的； /**当土司被销毁时触发*/ 隐藏的：可观察的； /**点击时触发*/ onTap：可观察的； /**可用于定制吐司*/ 动作：可观察； } 范例

const toaster=this.toastrService.success'OK'； toaster.onShown.subscribe=>{ this.stickyToasties.pushtoast.id； }; toaster.onHidden.subscribe=>{ 让index=this.stickyToasties.indexOftoast.id，0； 如果索引>-1{ this.stickyToasties.剪接索引，1； } };

---

用ngx toastr替换ng2 toasty的代码可能看起来像这样。请尝试让我知道：

 var timeOutSeconds = message.timeOutSeconds ? message.timeOutSeconds * 1000 : 4000;

  this.toastrService.success(message.title, message.summary, {
    timeOut: isSticky ? 0: timeOutSeconds
  });

  if (isSticky) {

     this.ActiveToast.onShown.subscribe((toast)=>{
            this.stickyToasties.push(toast.id);
        })

     this.ActiveToast.onHidden.subscribe((toast)=>{

        let index = this.stickyToasties.indexOf(toast.id, 0);

        if (index > -1) {
          this.stickyToasties.splice(index, 1);
        }

        toast.onAdd = null;
        toast.onRemove = null;
     })

  }

---

你到底想在这里实现什么？替换toast数据，因为它在ngx toast中似乎不存在，但什么是toast数据？你想用它做什么？e、 当X发生时，我希望Y发生。ngx的实现非常简单。您为根模块设置toast应该出现的时间、副本等。然后在需要时通过注入服务触发toast事件。2 toasty有很多混乱的部分初始化ToastOptions。ngx toastr不需要如此复杂的初始化或选项，你可以简单地使用它。@Tom，请给我一个适当的解释，让我来帮助你。我对ng2 toasty和ngx toastr基本上都是新手。正如我看到的ng2 toasty引用库ToastData一样，我已经分享了上面的代码，以展示代码中如何使用ToastData。我基本上是想看看如何用ngx来替换这部分代码。我已经发布了另一个答案。请试着让我知道。我可以看到你已经更换了烤面包机。在ngx toastr中没有toastoptions。我在下面的代码中进一步传递toast选项case MessageSeverity.info:this.toastrService.infotostoptions；打破case MessageSeverity.success：this.toastrService.successtostoptions；打破case MessageSeverity.error：this.toastrService.errortostoptions；断开案例消息severity.warn：this.toastrService.warningtoastOptions；打破不，没有选择。或者，您可以将标题、消息和时间保存在变量中，然后像这样传递它们：case MessageSeverity.info:this.toastrService.infotitle，msg，{timeout:time}；打破case MessageSeverity.success:this.toastrService.successtitle，msg，{timeout:time}；打破case MessageSeverity.error:this.toastrService.errortitle，msg，{timeout:time}；break case MessageSeverity.warn:this.toastrService.warningtitle，msg，{timeout:time}；打破您提到了this.ActiveToast的用法，它不是一个接口。我尝试在导入中使用它，并将其注入构造函数中，获取eror泛型类型“ActiveToast”需要1个类型参数。我以这种方式导入它，从“ngx toastr”导入{ToastrService，ToastrConfig，ActiveToast，ToastData}；并以这种方式注入构造函数管理器：LocalStoreManager，private-toastrService:toastrService，private-toastconfig:ToastrConfig，private-activeToast:activetoastal那么您能解释一下代码中的toastData是什么吗。在我的代码中，toastdata是toast:toastdata。因此，您的代码并没有取代toastdata的功能