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

Question

假设你需要在一个复杂的Angular应用中创建一个自定义管道，该管道依赖于一个服务来获取一些动态配置信息。请详细描述如何在自定义管道中使用依赖注入来获取该服务，并且在保证功能正确的前提下，如何进行性能优化，以避免因频繁调用服务导致的性能瓶颈。同时，说明在管道的生命周期中，应该在哪些阶段进行必要的资源清理等操作。

Answer 1

1. 在自定义管道中使用依赖注入获取服务

1. 创建服务：首先创建提供动态配置信息的服务。例如：

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

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  getConfig() {
    // 这里可以是获取动态配置的逻辑，例如从后端API获取
    return { someConfig: 'example' };
  }
}

2. 创建自定义管道：在管道类的构造函数中注入服务。

import { Pipe, PipeTransform } from '@angular/core';
import { ConfigService } from './config.service';

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  constructor(private configService: ConfigService) {}

  transform(value: any): any {
    const config = this.configService.getConfig();
    // 根据配置处理value
    return value;
  }
}

2. 性能优化

1. 缓存结果：如果服务返回的配置信息在一段时间内不会改变，可以缓存服务调用的结果。

import { Pipe, PipeTransform } from '@angular/core';
import { ConfigService } from './config.service';

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  private configCache: any;
  constructor(private configService: ConfigService) {}

  transform(value: any): any {
    if (!this.configCache) {
      this.configCache = this.configService.getConfig();
    }
    // 根据缓存的配置处理value
    return value;
  }
}

2. 减少不必要的调用：使用pure管道（默认情况下Angular管道是pure的），只有当输入值发生变化时才会调用transform方法。如果服务配置变化会影响输出，可以结合OnPush策略或手动处理变化检测，例如通过Observable来监听配置变化。

import { Pipe, PipeTransform } from '@angular/core';
import { ConfigService } from './config.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Pipe({
  name: 'customPipe',
  pure: false
})
export class CustomPipe implements PipeTransform {
  private config$: Observable<any>;
  constructor(private configService: ConfigService) {
    this.config$ = this.configService.getConfigObservable().pipe(
      map(config => {
        // 这里可以处理配置变化时的操作
        return config;
      })
    );
  }

  transform(value: any): any {
    let config;
    this.config$.subscribe(c => config = c);
    // 根据配置处理value
    return value;
  }
}

3. 资源清理

1. 管道销毁时：如果在管道中有订阅Observable等需要清理的资源，在管道销毁时取消订阅。可以实现OnDestroy接口。

import { Pipe, PipeTransform, OnDestroy } from '@angular/core';
import { ConfigService } from './config.service';
import { Observable, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Pipe({
  name: 'customPipe',
  pure: false
})
export class CustomPipe implements PipeTransform, OnDestroy {
  private config$: Observable<any>;
  private configSubscription: Subscription;
  constructor(private configService: ConfigService) {
    this.config$ = this.configService.getConfigObservable().pipe(
      map(config => {
        // 这里可以处理配置变化时的操作
        return config;
      })
    );
    this.configSubscription = this.config$.subscribe();
  }

  transform(value: any): any {
    let config;
    this.config$.subscribe(c => config = c);
    // 根据配置处理value
    return value;
  }

  ngOnDestroy() {
    this.configSubscription.unsubscribe();
  }
}