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

使用依赖注入获取服务

在管道类的构造函数中声明要注入的服务。例如，假设我们有一个名为 MyService 的服务，并且要在自定义管道 MyPipe 中使用它：

import { Pipe, PipeTransform } from '@angular/core';
import { MyService } from './my.service';

@Pipe({
  name:'myPipe'
})
export class MyPipe implements PipeTransform {
  constructor(private myService: MyService) {}

  transform(value: any, args?: any): any {
    // 可以在这里使用 myService
    const result = this.myService.doSomething(value);
    return result;
  }
}

确保在应用模块或相关模块中正确提供了 MyService。例如，在 app.module.ts 中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { MyService } from './my.service';
import { MyPipe } from './my.pipe';

@NgModule({
  declarations: [
    AppComponent,
    MyPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule {}

优化自定义管道性能

缓存计算结果：
- 如果管道的转换逻辑不依赖于外部变化（除了输入值），可以缓存计算结果。例如：

@Pipe({
  name:'myPipe'
})
export class MyPipe implements PipeTransform {
  private cache: { [key: string]: any } = {};
  constructor(private myService: MyService) {}

  transform(value: any, args?: any): any {
    const key = JSON.stringify([value, args]);
    if (this.cache[key]) {
      return this.cache[key];
    }
    const result = this.myService.doSomething(value);
    this.cache[key] = result;
    return result;
  }
}

减少不必要的调用：
- 使用 pure 管道（默认是 pure 管道），它只会在输入值引用变化时触发。如果输入是对象或数组，要注意其引用变化情况。例如，当传递一个对象给管道时，只有对象的引用改变，管道才会重新计算。
- 如果需要在对象属性变化时也触发管道更新，可以使用 impure 管道。但要谨慎使用，因为它会在每次 ChangeDetection 运行时触发，可能导致性能问题。在管道定义中设置 pure: false 来创建 impure 管道：

@Pipe({
  name:'myPipe',
  pure: false
})
export class MyPipe implements PipeTransform {
  constructor(private myService: MyService) {}

  transform(value: any, args?: any): any {
    const result = this.myService.doSomething(value);
    return result;
  }
}

批量处理数据：
- 如果管道应用于大量数据，可以考虑批量处理。例如，将数据分成若干小块，分别处理这些小块数据，而不是一次性处理所有数据。假设我们有一个处理数组的管道，可以将数组分成多个子数组进行处理：

@Pipe({
  name:'myPipe'
})
export class MyPipe implements PipeTransform {
  constructor(private myService: MyService) {}

  transform(value: any[], args?: any): any[] {
    const chunkSize = 100;
    const result: any[] = [];
    for (let i = 0; i < value.length; i += chunkSize) {
      const chunk = value.slice(i, i + chunkSize);
      const chunkResult = this.myService.doSomethingWithArray(chunk);
      result.push(...chunkResult);
    }
    return result;
  }
}

使用 OnPush 策略：
- 如果管道所在的组件使用 ChangeDetectionStrategy.OnPush，可以减少不必要的管道调用。组件标记为 OnPush 后，只有当输入引用变化、组件接收到事件或异步数据返回时，才会触发 ChangeDetection，进而触发管道的 transform 方法。在组件类中设置：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {}

星途面试题库

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

知识考点

面试题答案

使用依赖注入获取服务

优化自定义管道性能