如何在 Angular 中添加烤面包机？答案

【问题标题】：How to add toaster in Angular?如何在 Angular 中添加烤面包机？
【发布时间】：2019-08-05 08:45:13
【问题描述】：

知道如何在发生错误时添加烤面包机通知而不是使用警报。那里的许多教程只是在单击按钮时制作教程，但我想要一些自动化。下面是我的代码

saveStudentDetails(values) {
  const studentData = {};

  studentData['id'] =  values.id;
  studentData['password'] =  values.password;
  this.crudService.loginstudent(studentData).subscribe(result => {
    this.student = result;
    this.router.navigate(['/address']);
  },
    err => {
      console.log('status code ->' + err.status);
      alert('Please try again');
 });

}

知道如何根据此代码发出错误的烤面包机通知吗？谢谢

【问题讨论】：

如果你还没有实现第三方设计库，你可以使用material.angular.io/components/snack-bar/overview 它包含很多有用的东西
aww，我已经使用了 MDBoostrap，但在文档中，我仍然需要按下按钮才能弹出通知。您知道如何仅在发生错误时使其出现吗？

标签： angular typescript angular7

【解决方案1】：

对于显示烤面包机使用ngx-toastr库

步骤：

1) npm install ngx-toastr --save

2) 关注here的其他设置

快速代码：

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

saveStudentDetails(values) {
  const studentData = {};

  studentData['id'] =  values.id;
  studentData['password'] =  values.password;
  this.crudService.loginstudent(studentData).subscribe(result => {
    this.student = result;
    this.router.navigate(['/address']);
  },
    err => {
      console.log('status code ->' + err.status);
      this.toastr.error('Hello world!', 'Toastr fun!');
 });

【讨论】：

【解决方案2】：

您可以使用任何第三方烤面包机软件包，例如ngx-toastr 来显示错误烤面包机通知。

以 ngx-toastr 为例：

constructor(
  ...
  private toastr: ToastrService
) {}

this.crudService.loginstudent(studentData).subscribe(
  result => {
    this.student = result;
    this.router.navigate(['/address']);

    this. toastr.success('Logged in');
  },
  err => {
    console.log('status code ->' + err.status);

    this. toastr.error('Please try again');
  }
);

【讨论】：

【解决方案3】：

您可以使用 toastr。更多信息请访问https://www.npmjs.com/package/toastr。演示地址为https://codeseven.github.io/toastr/demo.html

【讨论】：