Question

如果在处理错误的服务中调用角度材质对话框组件引发任何错误，则在我的应用程序中全局处理错误。

错误处理程序服务

import { ErrorHandler, Injectable } from '@angular/core'
import { HttpErrorResponse } from '@angular/common/http';
import { errorDialog } from '..error-dialog/error-dialog.component';
import { MatDialog } from '@angular/material';
import { BehaviorSubject } from 'rxjs';


@Injectable()
export class GlobalErrorHandler extends ErrorHandler {
  private errdata = new BehaviorSubject<any>({});
  Edata = this.errdata.asObservable();
  constructor(private _dialog: MatDialog) {
    super();
  }
  handleError(error: any) {
    this.logError(error);
  }
  logError(error: any) {
    if (error instanceof HttpErrorResponse) {
      let data = {
        dialogMessage: "the system currently having issues",
      };
      this.getErrorInfo(data);
      this.openGenericErrorDialog();
    }
    else {
      throw error;
    }
  }
  getErrorInfo(data: any) {
    this.errdata.next(data);
  }
  //showing error dialog 
  openGenericErrorDialog(): void {
    this._dialog.open(errorDialog);

  }
}

Error-dialog.component.ts

import { Component, Inject, AfterContentInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Observable } from 'rxjs';
import { GlobalErrorHandler } from '../../global-error-handler.service';

@Component({
  selector: 'error-dialog',
  templateUrl: './error-dialog.component.html',
  styleUrls: ['./error-dialog.component.scss']
})
export class ErrorDialog implements AfterContentInit {
  ErrorInfo$: Observable<any>;
  constructor(
    public dialogRef: MatDialogRef<ErrorDialog>,
    @Inject(MAT_DIALOG_DATA) data,
    private _globalErrorHandler: GlobalErrorHandler) {
  }
  ngOnInit() {
    this._globalErrorHandler.Edata.subscribe(data =>
      this.ErrorInfo$ = data
    );
  }
}

错误对话框视图

<div mat-dialog-content class="dialog-message">
    {{ErrorInfo$.dialogMessage  }}
</div>

当我调试没有可观察到的this.ErrorInfo$中的数据填充时，对话框以空数据打开。

我尝试了不同的方法来将数据传递给材质对话框，例如使用MAT_DIALOG_DATA和组件实例，通过使用此方法，数据是传递到材质对话框时，显示数据时会发生一些延迟

现在我正在尝试使用可观察的方式传递数据，但在填充可观察的同时面临问题。我正在考虑使用异步管道来避免在我成功填充可观察到的数据时出现数据延迟。

订阅Angular 7中的组件时，观察不到填充

0 个答案: