Angular MatSnackBar 不适用于自定义类答案

【问题标题】：Angular MatSnackBar not working from custom classAngular MatSnackBar 不适用于自定义类
【发布时间】：2021-09-25 21:55:02
【问题描述】：

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

我的自定义类出现错误（无法从未定义中找到打开的。）但在 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.');
        };
    }

【问题讨论】：

感谢您的回复。我传递了错误并通过 console.error("Error code working") 行进行了验证。但下线snackbar.open 不起作用
你为什么要记录snackbar变量？你能告诉我们你的app.module.ts文件的完整代码吗？

标签： angular-material angular7

【解决方案1】：

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

变化

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

成功了

用户服务

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
        );
    }
  }

【讨论】：

很高兴看到你修好了。
这为我解决了同样的问题。但我不明白为什么。

【解决方案2】：

几天前我在我的应用程序中偶然发现了同样的问题。原因是this的上下文。

在

This.sb.open("hello world"); // Working Fine

this 的上下文是 UserService 类。而在

this.snackBar.open("Hello world"); // Throwing Error

this 的上下文已更改。可能是CatchSubscriber。

你已经提到了：

catchError((res) => this.eh.handleError(res)) // change in this line

解决了错误。因为它将this 的上下文更改回UserService 类。另一种解决方案是对整个 login() 使用箭头语法：

login = (credentials) => {
  // your code goes here
}

【讨论】：