Angular 17中如何在HttpInterceptorFn中注入依赖？

在Angular 17的函数式拦截器（HttpInterceptorFn）中，你可以直接用Angular提供的inject()函数获取依赖服务，不用像类拦截器那样通过构造函数注入。具体操作如下：

1. 先导入inject工具函数和需要的Router类：

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
// 如果要处理错误，还需要导入rxjs相关操作符
import { catchError, throwError } from 'rxjs';

2. 在拦截器函数内部，调用inject(Router)拿到Router实例，之后就能正常使用导航功能了：

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  // 注入Router实例
  const router = inject(Router);

  console.log('Intercepted');

  // 示例：拦截HTTP错误后导航到指定页面
  return next(req).pipe(
    catchError(err => {
      // 比如401未授权时跳转到登录页
      if (err.status === 401) {
        router.navigate(['/login']);
      }
      // 抛出错误或自定义错误处理逻辑
      return throwError(() => err);
    })
  );
};

补充说明 #

Angular的函数式拦截器运行在依赖注入（DI）上下文里，所以inject()函数可以安全地从DI容器中获取服务实例。这种方式和组件、指令中使用inject()的逻辑一致，是Angular v14+引入的函数式DI标准用法。

内容的提问来源于stack exchange，提问作者GuilhermeMarques