Question

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

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');
 });

}

任何想法都可以基于此代码进行错误的烤面包机通知吗？谢谢

Answer 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!');
 });

Answer 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');
  }
);

Answer 3

您可以使用烤面包机。可以在https://www.npmjs.com/package/toastr上找到更多信息。该演示位于https://codeseven.github.io/toastr/demo.html

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

3 个答案: