更新 Angular Toastr 中的文本

Question

我想更改已显示的 toastr 文本。

我正在使用以下代码创建并尝试更新现有文本。

  if (this.toastr.currentlyActive > 0) {
    this.toastr.toasts.find(toast => toast.toastId == 1).message = "Tempo em Atendimento: " + tempoAtendimento;
  } else {
    this.toastr.info("Tempo em Atendimento: " + tempoAtendimento, "", { timeOut: 0, extendedTimeOut: 0 });
  }

我没有收到错误消息，但是文本没有更改！有什么建议吗？

我正在使用： https://github.com/scttcper/ngx-toastr/ 范桑： 10.1.0

Answer 1

this.toastr.toasts.find(toast => toast.toastId == 1)

将 return ActiveToast 对象更改 message 属性对象上的 ActiveToast 不会影响组件本身。

要更改显示组件上的消息，您需要引用组件对象。这样您就可以直接在组件本身上更新 message 属性。您可以通过

轻松地从ActiveToast对象中获取对组件实例的引用

let _componentInstance = this.toastr.toasts.find(toast => toast.toastId == 1).toastRef.componentInstance

然后只需将 _componentInstance 上的 message 属性修改为您想要的任何内容即可。

_componentInstance.message = "new message"

Answer 2

作为对@Minato 他的回答的补充...

创建 toastr 消息时，将返回 ActiveToast 的实例。如果将其存储在变量中，则无需按 ID 搜索它。

const toast: ActiveToast = this.toastrService.success('My toastr message');
const componentInstance: Toast = toast.toastRef.componentInstance;
setTimeout(
  () => toastComponent.message = 'My changed message', 3000
);

更新 Angular Toastr 中的文本

Update text in Angular Toastr

typescript

toastr

angular