0

我正在使用 Angular v. 12.2.4 开发一个网络应用程序。

我正在尝试使用 ngx-toastr 库（v. 14.2.1）在 HTTP 错误时显示通知祝酒词。使用 Angular HTTP 拦截器功能，我试图将 ToasterService 注入到我的自定义拦截器类中，只是得到以下错误：

ERROR TypeError: this._appRef.attachView is not a function
    at Ke.attachComponentPortal (ngx-toastr.mjs:280)
    at Ke.attach (ngx-toastr.mjs:79)
    at tt.attach (ngx-toastr.mjs:310)
    at dt._buildNotification (ngx-toastr.mjs:597)
    at dt._preBuildNotification (ngx-toastr.mjs:560)
    at dt.error (ngx-toastr.mjs:472)
    at S.selector (toastr.interceptor.ts:23)
    at S.error (catchError.js:29)
    at j.observe (Notification.js:22)
    at M._next (dematerialize.js:17)

ToastrInterceptor.ts：

import { Injectable, NgZone } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr';
import { ERROR_MESSAGES } from 'src/app/utils/config/modal-settings';

@Injectable()
export class ToastrInterceptor implements HttpInterceptor {
    constructor(private toastrService: ToastrService) { }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            catchError((error: HttpErrorResponse) => {
                console.error(error);

                let msg;

                if (error?.error?.message !== undefined)
                    msg = error.error.message;
                else
                    msg = ERROR_MESSAGES[error.status] || ERROR_MESSAGES[0];

                this.toastrService.error(msg)
                console.log("ERROR MESSAGE", msg);
                return throwError(error);
            })
        );
    }
}

对此有任何帮助/线索吗？谢谢你。

4

1 回答 1

0

通过使用 Injector 解决了这个问题：https ://github.com/scttcper/ngx-toastr/issues/179 。

于 2021-11-22T14:40:46.150 回答