Question

我想在吐司中显示错误消息... 这是我的错误处理程序

import { ErrorHandler, Inject, NgZone } from "@angular/core";
import { ToastyService } from "ng2-toasty";

export class AppErrorHandler implements ErrorHandler {
constructor(@Inject(NgZone) private ngZone: NgZone, @Inject(ToastyService) 
private toastyService: ToastyService){}
handleError(error: any): void {
    this.ngZone.run(() => {
        this.toastyService.error({
            title: 'Error',
            msg: 'An unexpected error happened',
            theme: 'bootstrap',
            showClose: true,
            timeout: 5000
        });
    });
  }
}

这是我提交的方法：

submit() {
    this.vehicleService.create(this.vehicle).subscribe(x => console.log(x));
}

在我的api中，我编写了一个execption方法，以便生成错误和弹出通知

这是我的api：

[HttpPost]
    public async Task<IActionResult> CreateVehicle([FromBody] SaveVehicleResource vehicleResource)
    {
        throw new Exception();
        if (!ModelState.IsValid)
            return BadRequest(ModelState);

        var vehicle = mapper.Map<SaveVehicleResource, Vehicle>(vehicleResource);
        vehicle.LastUpdate = DateTime.Now;

        repository.Add(vehicle);
        await unitOfWork.CompleteAsync();

        vehicle = await repository.GetVehicle(vehicle.Id);

        var result = mapper.Map<Vehicle, VehicleResource>(vehicle);

        return Ok(result);
    }

在控制台中，它会显示错误消息，但不会弹出Toast通知...

Answer 1

当我处理相同的 course from Mosh Hamedani on Udemy

我可以通过以下步骤解决这个问题：

从 https://github.com/akserg/ng2-toasty bootstrap、default 或 material 下载 CSS 文件
将它放在 vega/ClientApp/src/toasty-style-bootstrap.css 下，以防您选择 Bootstrap 主题
确保您的 vega/ClientApp/angular.json 在相应部分包含新样式文件

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "src/toasty-style-bootstrap.css"
],

Answer 2

你会改变并尝试这样：

<强>从

从＆＃34; ng2-toasty＆＃34;;

导入{ToastyService}

到

从＆＃39; angular2-toaster＆＃39;中导入{ToasterService，ToasterConfig，Toast，BodyOutputType};

import { ToasterService, ToasterConfig, Toast, BodyOutputType } from 'angular2-toaster';

import 'style-loader!angular2-toaster/toaster.css';

export class NotificationsComponent {
  constructor(private toasterService: ToasterService) {}

 --your code 

 config: ToasterConfig;

  position = 'toast-top-right';
  animationType = 'fade';
  title = 'HI there!';
  content = `I'm cool toaster!`;
  timeout = 5000;
  toastsLimit = 5;
  type = 'default';

  isNewestOnTop = true;
  isHideOnClick = true;
  isDuplicatesPrevented = false;
  isCloseButton = true;

  types: string[] = ['default', 'info', 'success', 'warning', 'error'];
  animations: string[] = ['fade', 'flyLeft', 'flyRight', 'slideDown', 'slideUp'];
  positions: string[] = ['toast-top-full-width', 'toast-bottom-full-width', 'toast-top-left', 'toast-top-center',
    'toast-top-right', 'toast-bottom-right', 'toast-bottom-center', 'toast-bottom-left', 'toast-center'];




quotes = [
    { title: null, body: 'We rock at <i>Angular</i>' },
    { title: null, body: 'Titles are not always needed' },
    { title: null, body: 'Toastr rock!' },
    { title: 'What about nice html?', body: '<b>Sure you <em>can!</em></b>' },
  ];

makeToast() {
    this.showToast(this.type, this.title, this.content);
  }
clearToasts() {
    this.toasterService.clear();
  }
private showToast(type: string, title: string, body: string) {
  this.config = new ToasterConfig({
      positionClass: this.position,
      timeout: this.timeout,
      newestOnTop: this.isNewestOnTop,
      tapToDismiss: this.isHideOnClick,
      preventDuplicates: this.isDuplicatesPrevented,
      animation: this.animationType,
      limit: this.toastsLimit,
    });


  const toast: Toast = {
      type: type,
      title: title,
      body: body,
      timeout: this.timeout,
      showCloseButton: this.isCloseButton,
      bodyOutputType: BodyOutputType.TrustedHtml,
    };
    this.toasterService.popAsync(toast);
  }

}

吐司通知不起作用

2 个答案: