Angular自定义过滤器中如何在独立过滤函数内获取注入的服务

嗨，我完全懂你的困扰——你想在自定义过滤器的实际处理函数里用到依赖的studentService，但又不想把这个处理函数嵌套在过滤器工厂函数内部。别担心，我们可以借助JavaScript的闭包特性来搞定这个问题，不用改变你当前的代码结构。

这里有两种可靠的方案：

方案一：给过滤函数添加属性存储服务引用 #

你可以在过滤器工厂函数里，把studentService赋值给dataFormatFunction的一个属性，这样在过滤函数内部就能直接访问这个属性了：

export function dataFormatFilter(studentService){ 
  console.log(studentService); // 此处可访问studentService
  // 将服务绑定到过滤函数的属性上
  dataFormatFunction.studentService = studentService;
  return dataFormatFunction;
}

function dataFormatFunction(name){ 
  // 现在可以直接访问服务了
  const service = dataFormatFunction.studentService;
  // 你的格式化逻辑，比如使用服务的方法或属性
  return service.getStudentFullName(name); // 示例用法
}

这种方法简单直接，因为Angular的过滤器工厂是单例的，所以不会出现服务引用被覆盖的问题。

方案二：用IIFE创建闭包存储服务（更安全） #

如果想避免直接修改函数属性，你可以用立即执行函数表达式（IIFE）创建一个闭包，把服务的引用藏在闭包内部，同时暴露一个方法来设置服务：

// 用IIFE创建闭包，封装服务引用和过滤逻辑
const dataFormatFunction = (() => {
  let _studentService;
  
  // 暴露设置服务的方法
  function setService(service) {
    _studentService = service;
  }
  
  // 实际的过滤函数
  function filter(name) {
    // 闭包内可以直接访问_studentService
    return _studentService.formatStudentName(name); // 示例用法
  }
  
  // 把setService方法附加到过滤函数上
  filter.setService = setService;
  return filter;
})();

export function dataFormatFilter(studentService){ 
  console.log(studentService);
  // 通过setService方法传递服务引用
  dataFormatFunction.setService(studentService);
  return dataFormatFunction;
}

这种方式更安全，因为服务引用是闭包内部的私有变量，不会被外部意外修改，同时也保持了你的代码结构——过滤函数依然在工厂函数外部。

这两种方案的核心思路都是：利用Angular先执行过滤器工厂函数的特性，提前把服务的引用传递给过滤函数能访问到的地方，这样当Angular调用过滤函数处理数据时，就能拿到服务了。

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