在 Angular 拦截器中使用 Angular 服务答案

【问题标题】：Use an Angular Service in an Angular Interceptor在 Angular 拦截器中使用 Angular 服务
【发布时间】：2022-01-04 16:24:09
【问题描述】：

我有一个服务，我有一个 http 拦截器。每次发生拦截时，我都想通知我的服务。这是我的代码：

interceptor.ts：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { MastermindService } from './mastermind.service';

@Injectable()
export class LogInterceptor implements HttpInterceptor {

  constructor(private mastermindService: MastermindService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.mastermindService.notify(`${request.method} ${request.urlWithParams} ${JSON.stringify(request.body)} ${request.responseType}`)
    return next.handle(request);

  }
}

service.ts:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class MastermindService {
  private subject = new Subject<string>();

  public notify(message: string): void {
    this.subject.next(message);
  }
  public listen(): Observable<string> {
    return this.subject.asObservable();
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { GameboardItemComponent } from './shared/gameboard-item/gameboard-item.component';
import { LogInterceptor } from './core/log.interceptor';
import { MastermindService } from './core/mastermind.service';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    CoreModule,
    SharedModule,
   
  ],
  providers: [{provide: HTTP_INTERCEPTORS, useClass: LogInterceptor, multi: true, deps: [MastermindService]}],
  bootstrap: [AppComponent],
  entryComponents: [GameboardItemComponent] // define the dynamic component here in module.ts

})
export class AppModule { }

此外，我还有一个日志组件，应该输出拦截消息：

import { Component, OnInit } from '@angular/core';
import { MastermindService } from 'src/app/core/mastermind.service';

@Component({
  selector: 'app-custom-log',
  templateUrl: './custom-log.component.html',
  styleUrls: ['./custom-log.component.scss']
})
export class CustomLogComponent implements OnInit {

  constructor(private mastermindService: MastermindService) { }
  logs: string[] = [];
  
  ngOnInit(): void {
    this.mastermindService.listen().subscribe((event) => {
       this.logs.push(event);
       console.log(event);
    });
  }


}

问题是控制台上没有输出。而且我的日志数组中也没有元素。

【问题讨论】：

标签： angular angular-services angular-http-interceptors

【解决方案1】：

您是否在 CustomLogComponent 组件中提出任何请求？如果要存储在加载 CustomLogComponent 之前发出的请求，则需要将主题与初始值为 null 的 BehaviourSubject 或缓冲区大小为 1 的 ReplaySubject 交换

【讨论】：