NGPrime MessageServices 和 Interceptor 错误

Error with NGPrime MessageServices and Interceptor

提问人:Jacin Montava 提问时间:9/5/2023 最后编辑:Jacin Montava 更新时间:9/5/2023 访问量:41

问:

我已经处理这个问题一天半了,但我找不到解决方案。 我创建了一个拦截器来捕获 HTTP 调用中的错误消息,我希望它使用 PrimeNG MessageService 显示错误消息。

拦截器工作正常,但是当我调用MessageService时,出现以下错误:

TypeError:无法读取 undefined 的属性(读取“add”)

我已经尝试了一千种方法,但没有一种对我有用。

这是我的代码:

app.module.ts

import { HTTP_INTERCEPTORS, HttpClient, HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { JwtModule } from '@auth0/angular-jwt';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './core/helpers/auth-guard';
import { RedirectInterceptor } from './core/interceptors/redirect.interceptor';
import { NotfoundComponent } from './demo/components/notfound/notfound.component';
import { AppLayoutModule } from './layout/app.layout.module';
import { HomePageComponent } from './shared/components/home-page/home-page.component';
import { MasterTableComponent } from './shared/components/master-table/master-table.component';
import { PrimeNgModule } from './shared/primeng.module';
import { MessageService } from 'primeng/api';
import { ErrorInterceptor } from './core/interceptors/error.interceptor';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Router } from '@angular/router';
import { Observable, catchError, throwError } from 'rxjs';

export function tokenGetter() {
  return localStorage.getItem("token");
}

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@Injectable()
export class ErrorInterceptor2 implements HttpInterceptor {
  constructor(protected router: Router, private translate: TranslateService, private messageService: MessageService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        console.log(err.error.error)
        this.messageService.add({ key:'error-notif', severity: 'error', summary: 'Error', detail: err.error.error });
        console.log('message send');
        /* let errorText = this.translate.get(err.error.error).subscribe((res: string) => {
          console.log(res);
        });
        console.log(errorText); */
        return throwError(() => err.error.error);
      })
    );
  }
}

@NgModule({
  declarations: [
    AppComponent, NotfoundComponent, MasterTableComponent, HomePageComponent
  ],
  imports: [
    AppRoutingModule,
    AppLayoutModule,
    PrimeNgModule,
    FormsModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ["localhost"],
      },
    }),
    TranslateModule.forRoot({
      defaultLanguage: 'es',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    PrimeNgModule
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: RedirectInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor2, multi: true, deps: [MessageService] },
    AuthGuard,
    MessageService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用组件:.html

<p-toast key="error-notif" position="top-left"></p-toast>
<router-outlet></router-outlet>```
Angular TypeScript 错误处理 primeng angular-http-interceptors

评论


答: 暂无答案