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

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

你可以使用toastr。更多信息可以在https://www.npmjs.com/package/toastr找到。该演示在https://codeseven.github.io/toastr/demo.html