Angel版本16,MoneyComponent是一个独立的组件.

应用程序 struct 是 SRC\APP\Pages\Money.只有一个页面moneyForms需要拦截器来向API HttpPost发送附加信息,因此不是将拦截器添加到app.module中,而是将其添加到子延迟加载模块money.module.ts中:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { moneyFormsComponent } from './money-forms.component';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; 
import { AuthInterceptor } from '../../guards/auth.interceptor';

@NgModule({
  declarations: [
    moneyFormsComponent
  ],
  imports: [
    CommonModule,    
    RouterModule.forChild([
        {
            path:'',  
            component:moneyFormsComponent,
            children: [
              { path: 'money-forms', loadComponent: () => import('../m/m.component').then(t => t.MoneyComponent)}, 
              ...
            ]
        }       
    ]),
  ],
  providers:[
    {  
      provide: HTTP_INTERCEPTORS,  
      useClass: AuthInterceptor,  
      multi: true  
    },  
  ],
  exports: [RouterModule]  
})

export class moneyFormsModule {}

预期的信息没有添加到头中,因此我将AuthInterceptor简化为

import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from '@angular/common/http';  
import { Injectable } from '@angular/core';  
import { Observable } from 'rxjs';  
  
@Injectable()  
export class AuthInterceptor implements HttpInterceptor {  
  constructor() {}  
  
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {  
    console.log("--- Hello ----");
    return next.handle(request);  
  }  
}  

仍然,控制台没有打印--- Hello ----.

我判断了这些帖子,确保HttpClientModule只加载了一次,并且位于根app.module.ts中. Angular2 Http Interceptor not working in child module

Interceptor not intercepting http requests (Angular 6)

Interceptor declared in app.module is not intercepting call from one lazy loaded module

Angular - Interceptor not loading in a lazy loaded module

Update个 如果出现以下情况,控制台将打印

  • 将拦截器的注册移动到根app.mode.ts
  • 将@Inputable()替换为@Injectable({ProvidedIn:‘Root’})

推荐答案

得出的结论是:

  1. 如果需要,HttpClientModule可以位于根app.module中,并可以延迟加载 子模块也是.

  2. 确保该子模块中使用的所有服务、工厂等 注册在这里,这就是我错过的地方添加

    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
    
  3. 独立组件,添加

    import { HTTP_INTERCEPTORS } from '@angular/common/http';
    import { ... } from 'src/app/services/...';
    import { AuthInterceptor } from './guards/auth.interceptor';
    providers: [{  
        provide: HTTP_INTERCEPTORS,  
        useClass: AuthInterceptor,  
        multi: true  
      }],
    

Angular相关问答推荐

如何从Angular TS文件传递$Events对象?

Angular 空变量使用组件之间的共享服务

为什么这个拦截器只在发送事件上触发,而不是在实际响应上触发?

使用当前选定的选项创建IF语句

仅在从forkJoin获得数据后订阅主题

AG网格Angular 快捷菜单调用函数

Angular 17:延迟加载带参数的独立组件?

如何让 ag-Grid 事件读取私有方法?

使用 RXJS 进行空闲/不活动跟踪

如何在 Angular14 中创建带有验证的自定义输入组件?

升级到 Webpack 5.79.0 后 NX Angular 项目构建失败

http 调用的 RxJs 数组

如何有条件地更新 Angular 路由解析器数据?

Storybook 和 Angular 交互游戏测试未定义预期

Angular:为什么在我的自定义 ErrorHandler 中订阅主题不触发?

如何以编程方式关闭 ng-bootstrap 模式?

怎样在 Angular 2 或 4 中将输入字段设为只读?

Angular url加号转换为空格

提交后在Angular 2中重置表单

使用 EventEmitter 传递参数