面试题：Angular自定义管道中的依赖注入与性能优化

在管道中使用依赖注入

定义服务：首先创建提供复杂数据转换功能的服务。例如：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataTransformationService {
  transformData(data: any[]): any[] {
    // 复杂的数据转换逻辑
    return data.map(item => {
      // 转换操作
      return item;
    });
  }
}

在管道中注入服务：在自定义管道中通过构造函数注入该服务。

import { Pipe, PipeTransform } from '@angular/core';
import { DataTransformationService } from './data - transformation.service';

@Pipe({
  name: 'dataTransformationPipe'
})
export class DataTransformationPipe implements PipeTransform {
  constructor(private dataTransformationService: DataTransformationService) {}

  transform(value: any[]): any[] {
    return this.dataTransformationService.transformData(value);
  }
}

提高性能的措施

纯与不纯模式选择：
- 纯管道：如果数据转换是基于输入值的纯函数，即相同的输入总是返回相同的输出，并且不依赖于任何外部状态（如服务中的可变数据），应使用纯管道。纯管道仅在输入值引用变化时才会重新计算。例如，如果 DataTransformationService.transformData 方法仅根据输入数组的内容进行转换，而不依赖于服务内部的其他可变状态，那么可以使用纯管道。在定义管道时，默认就是纯管道，不需要额外配置。纯管道性能较好，因为 Angular 不会频繁调用它。
- 不纯管道：如果数据转换依赖于外部状态（如服务中的可变数据、当前时间等），或者输入值相同但输出可能不同（例如每次调用返回不同的随机数），则应使用不纯管道。在定义管道时，将 pure 属性设置为 false，如下：
```
@Pipe({
  name: 'dataTransformationPipe',
  pure: false
})
export class DataTransformationPipe implements PipeTransform {
  constructor(private dataTransformationService: DataTransformationService) {}

  transform(value: any[]): any[] {
    return this.dataTransformationService.transformData(value);
  }
}
```
不纯管道每次变化检测运行时都会被调用，性能开销较大，所以要谨慎使用。

缓存结果：如果管道处理的数据相对稳定，且计算成本高，可以在服务中实现缓存机制。例如：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataTransformationService {
  private cache: { [key: string]: any[] } = {};

  transformData(data: any[]): any[] {
    const key = JSON.stringify(data);
    if (this.cache[key]) {
      return this.cache[key];
    }
    const result = data.map(item => {
      // 转换操作
      return item;
    });
    this.cache[key] = result;
    return result;
  }
}

减少不必要的转换：在管道的 transform 方法中添加逻辑，只有当输入数据发生有意义的变化时才进行转换。例如，可以比较输入数组的长度，如果长度未变且某些关键属性未变，可直接返回之前的转换结果。

@Pipe({
  name: 'dataTransformationPipe'
})
export class DataTransformationPipe implements PipeTransform {
  constructor(private dataTransformationService: DataTransformationService) {}

  private previousData: any[];
  private previousResult: any[];

  transform(value: any[]): any[] {
    if (this.previousData && this.previousData.length === value.length) {
      let shouldRecompute = false;
      for (let i = 0; i < value.length; i++) {
        if (value[i].key!== this.previousData[i].key) {
          shouldRecompute = true;
          break;
        }
      }
      if (!shouldRecompute) {
        return this.previousResult;
      }
    }
    const result = this.dataTransformationService.transformData(value);
    this.previousData = value;
    this.previousResult = result;
    return result;
  }
}

星途面试题库

面试题：Angular自定义管道中的依赖注入与性能优化

知识考点

面试题答案

在管道中使用依赖注入

提高性能的措施