Question

我正在尝试使用自定义类中的Material Snackbar创建吐司。

我的自定义类出现错误（无法从undefined中找到打开内容。），但在user.service.ts中工作正常

如果使用ngZone，则出现错误，（无法从未定义的位置查找运行）

注意：在ErrorHandler类中

console.log(this.snackBar) // gives undefined

app.module.ts

 providers: [ErrorHandler],
  bootstrap: [AppComponent]
})
export class AppModule { }

用户服务

  import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { catchError } from 'rxjs/operators';
  import { environment } from '../../environments/environment';
  import { ErrorHandler } from '../classes/error-handler';
  import {MatSnackBar} from '@angular/material';

  @Injectable({
    providedIn: 'root'
  })
  export class UserService {

    private url = environment.api+'/login';
    constructor(private http: HttpClient, private eh:ErrorHandler, private sb: MatSnackBar) { }

    login(credentials){
      this.sb.open("hello world"); // Working Fine
      return this.http.post(this.url, {})
        .pipe(
          catchError(this.eh.handleError)
        );
    }
  }

错误处理程序类

    import {Component, Injectable, NgZone} from '@angular/core';
    import { HttpErrorResponse } from '@angular/common/http';
    import { throwError } from 'rxjs';
    import * as _ from 'lodash';
    import {MatSnackBar} from '@angular/material';

    @Injectable({
        providedIn: 'root'
    })
    export class ErrorHandler {
        constructor (private snackBar: MatSnackBar) {}

        public handleError(error: HttpErrorResponse) {
            if (error.error instanceof ErrorEvent) {
            console.error('An error occurred:', error.error.message);
            } else {
                console.error("Error code working")
                console.log(this.snackBar) // gives undefined
                this.snackBar.open("Hello world"); // Throwing Error
            }
            // return an observable with a user-facing error message
            return throwError('Something bad happened; please try again later.');
        };
    }

Answer 1

谢谢大家。我修好了它。不幸的是，我错过了stackoverflow链接。

更改

 catchError((res) => this.eh.handleError(res))

成功了

UserService

import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { catchError } from 'rxjs/operators';
  import { environment } from '../../environments/environment';
  import { ErrorHandler } from '../classes/error-handler';
  import {MatSnackBar} from '@angular/material';

  @Injectable({
    providedIn: 'root'
  })
  export class UserService {

    private url = environment.api+'/login';
    constructor(private http: HttpClient, private eh:ErrorHandler, private sb: MatSnackBar) { }

    login(credentials){
      this.sb.open("hello world"); // Working Fine
      return this.http.post(this.url, {})
        .pipe(
          catchError((res) => this.eh.handleError(res)) // change in this line
        );
    }
  }

角度MatSnackBar不适用于自定义类

1 个答案: