Angular 6 錯誤處理不顯示吐司

Question

我正在使用下面的代碼來捕獲我的小型 Angular 6 應用程序中的錯誤......我正在捕獲錯誤，我正在控制台中顯示信息問題是除非我單擊應用程序中的某個位置，否則不會顯示 toasts，它們不會顯示不會自己一個人出現。 我在應用程序的其他部分使用 ToastrService，每當我像在這里那樣調用它時，它都會顯示 toats，而無需單擊任何東西。

知道什么可能導致這種行為嗎？

import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { AppSettings } from '../../app.settings';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) {}

  public handleError(error: any) {

    const router = this.injector.get(Router);
    const settings = this.injector.get(AppSettings)

    const toastr = this.injector.get(ToastrService);

    console.log(`Request URL: ${router.url}`);
    console.log(error);
    if (error instanceof HttpErrorResponse) {
      console.log("it is");
      if (error.status === 401) {
        router.navigate(['/login']);
        settings.settings.setLoadingSpinner(false);
        toastr.error('Logged in user no longer authenticated on server.', 'Unable to connect to server');
      } else if (error.status === 404) {
        console.log("it is 404");
        toastr.error('Unable to connect to server. Missing or wrong URL, please try again', 'Unable to connect to server');
        settings.settings.setLoadingSpinner(false);
      } else if (error.status === 0) {
        toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
        settings.settings.setLoadingSpinner(false);
      } else if (error.status === 500) {
        toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
        settings.settings.setLoadingSpinner(false);
      }

    } else {
      console.error(error);
      toastr.error('An error has occured', 'Sorry');

    }

  }

}

我還在模塊中添加了提供程序，以將此類用作錯誤處理程序。

Answer 1

請在構造函數中包含烤面包機服務並運行。 根據我的理解，當服務被實例化時，烤面包機應該被啟動。

Answer 2

我相信您可以在構造函數中導入並包含NgZone以按預期進行這項工作：

constructor(private injector: Injector, private zone: NgZone) {}

然后包裝您的toastr調用：

this.zone.run(() => toastr.error('message', 'title'));