在 Angular（成功或失败）中提交后的 Toast 通知

Question

我是 Angular 的初学者，如果这对您来说很容易，请多多包涵。我想在用户执行 'submit' 操作后打印 Toast 通知，如果成功则为绿色（在其他页面中），如果失败则为红色（在带有表单的页面中）。目前，我将数据保存在数据库中并导航到 post 的视图，我的 api returns 代码 200。我想传递http的状态码，或者一个布尔变量，但我不知道如何传递给另一个page/component。这是我试过的

if (this.actionType === 'Add') {
        const post: Post = {
        /....../
          data: this.form.get(this.formData).value
        /....../
        };
        this.postService.savePost(post)
          .subscribe((data) => {
            this.router.navigate(['/post', data.id]);
          });
      }

这是我在服务中的功能

savePost(post): Observable<Post> {
    return this.http.post<Post>(this.myAppUrl + this.myPost, JSON.stringify(post), this.httpOptions)
      .pipe(
        retry(1),
        catchError(this.errorHandler)
      );
  }

非常感谢

Answer 1

您可以使用其中一个 npm 包 (ngx-toastr) 进行 toast 通知 - https://www.npmjs.com/package/ngx-toastr/v/8.8.0

Answer 2

此代码使用 ngx-toast。

this.postService.savePost(post)
              .subscribe(
               data => {
                this.router.navigate(['/post', data.id]);
              this.showSuccess();
              },
              error => ( this.showError(); )
          );
    showSuccess() {
        this.toastr.success('Post Added', 'Success');
      }
    showError() {
        this.toastr.success('Something went wrong', 'Error');
      }

在 Angular（成功或失败）中提交后的 Toast 通知

Toast Notification after Submit in Angular (Success or Failed)

http

toast

angular