在 Angular 中的 toastr 通知之后呈现另一个页面

问题描述

我正在尝试在 toastr 通知消失后呈现导航另一个页面。

  showToasterWarning(){
    this.notifyService.showWarning("No Data Found for this Date!","");
    
}

notifyService 是 toastr 的服务。

在我的代码中：

if(array == []){
this.showToasterWarning();
}

通知消失后意味着在 4 或 5 秒后我想使用以下方法导航另一个页面：

this.router.navigate(..........);

只有在 toastr 消失后，我才想转到另一个页面。

ngx-toastr 中的任何选项可以在通知消失后执行任何操作吗？

解决方法

请试试这个！

this.toastr.info('No Data Found for this Date!')
      .onHidden 
      .subscribe(() => this.router.navigateByUrl('......'));
})

,

Ngx-toast 包在 toastr 隐藏时为我们提供了一个可观察的对象。

显示toastr后，您可以获取其实例并使用“onHidden”属性。

    const toast = this.toastr.success('Hello!');
    toast.onHidden.subscribe(() => {
     console.log('Toast hidden');
     this.router.navigate(....)
    });

我在stackblitz

中做了一个例子