如何使用独立组件在 HttpInterceptorFn 中使用 SnackBarService？

Question

我正在尝试显示从后端获得的响应。因此，我创建了一个显示小吃栏的服务，然后我想在我的拦截器中实现它。我正在使用独立组件，因此我需要继续使用功能组件，因为 ProvideHttpClient(withInterceptors...))

这是我的拦截器

import { SnackbarService } from '../services/snackbar.service';
import { inject } from '@angular/core';
import { HttpInterceptorFn } from '@angular/common/http';
import { catchError } from 'rxjs/operators';

export const errorHandlerInterceptor: HttpInterceptorFn = (req, next) => {
  const snackbarService: SnackbarService = inject(SnackbarService);

  return next(req).pipe(
    catchError((error) => {
      console.log(snackbarService);
      snackbarService.openErrorSnackbar('Error found: ' + error.error);
      return [];
    })
  );
};

这是我的服务

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

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

  public openErrorSnackbar(message: string): void {
    this.snackBar.open(message, 'Dismiss', {
      duration: 5000,
      panelClass: ['error-snackbar'],
    });
  }
}

我的应用程序配置

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { routes } from './app.routes';
import { errorHandlerInterceptor } from './core/interceptors/error.interceptor';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    provideHttpClient(withInterceptors([errorHandlerInterceptor])),
  ]
};

和我的app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http'


@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot([]),
  ],
  bootstrap: [],
  providers: [HttpClientModule, ]
})
export class AppModule {}

所以我尝试控制台记录我的拦截器，这有效。小吃店的东西则不然。 我试过了

1. 通过类更改我的功能服务
2. 在 .module 或 .config 中添加提供程序
3. 在我的独立组件之一中显示（不使用该服务来检查我是否至少可以显示小吃栏）

Answer 1

这是一个演示其工作原理的工作示例，我发现了一些问题。

1. 使用独立组件时，我们不

   BrowserModule

   ，

   HttpClientModule

   ，

   RouterModule.forRoot([])

   我们可以删除它们。

我们可以像下面这样配置它：

import '@angular/localize/init';
import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { VERSION as CDK_VERSION } from '@angular/cdk';
import {
  VERSION as MAT_VERSION,
  MatNativeDateModule,
} from '@angular/material/core';
import { SnackBarOverviewExample } from './example/snack-bar-overview-example';
import { errorHandlerInterceptor } from './app/test.interceptor';
import { provideRouter } from '@angular/router';

/* eslint-disable no-console */
console.info('Angular CDK version', CDK_VERSION.full);
console.info('Angular Material version', MAT_VERSION.full);

bootstrapApplication(SnackBarOverviewExample, {
  providers: [
    provideAnimations(),
    provideHttpClient(),
    provideRouter([]),
    importProvidersFrom(MatNativeDateModule),
    provideHttpClient(withInterceptors([errorHandlerInterceptor])),
  ],
}).catch((err) => console.error(err));

请关注上面的providers数组，其余的可能不相关。

堆栈闪电战