角度 18 的拦截器

Question

import { HttpInterceptorFn } from '@angular/common/http';

export const customInterceptor: HttpInterceptorFn = (req, next) => {
  debugger;
  console.log('hellow');
  
  return next(req);
};



import { JsonPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [JsonPipe],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css'
})
export class DashboardComponent implements OnInit{

  http = inject(HttpClient);
  userlist: any[]=[];
  ngOnInit(): void {
    this.getallwalks();
  }

  getallwalks(){
    debugger;
    this.http.get("http://localhost:5134/api/Walks").subscribe((res:any)=>{
      this.userlist = res;
    })
  }

}

这是自定义拦截器和仪表板组件。拦截器没有击中并使用角度 18。

我还在 app.config 文件中输入了提供httpclient。

Answer 1

为了确保使用您的自定义拦截器，您需要在应用程序中提供它，特别是

main.ts

文件。

它看起来像这样：

 bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(
      withInterceptors([customInterceptor])
    )
  ]
}).catch(err => console.error(err));