面试题：Angular自定义管道的实现与应用场景优化

Question

假设你需要创建一个自定义管道，用于将输入的数字转换为特定的货币格式（例如人民币格式，保留两位小数并添加货币符号）。请描述实现这个自定义管道的详细步骤，并说明在实际项目中如何对其进行性能优化。

Answer 1

实现自定义管道步骤

1. 创建管道类：在项目中创建一个新的管道类，例如CurrencyPipe。在Angular中，可使用ng generate pipe Currency命令快速生成管道文件。
2. 导入必要模块：在管道文件中导入Pipe和PipeTransform装饰器，用于定义管道。

import { Pipe, PipeTransform } from '@angular/core';

3. 实现PipeTransform接口：在管道类中实现PipeTransform接口的transform方法，该方法接收输入值和可选参数，并返回转换后的值。

@Pipe({
  name: 'currency'
})
export class CurrencyPipe implements PipeTransform {
  transform(value: number, ...args: unknown[]): string {
    // 转换逻辑
  }
}

4. 货币格式转换逻辑：在transform方法中实现货币格式转换。

transform(value: number, ...args: unknown[]): string {
  const currencySymbol = '¥';
  const fixedValue = value.toFixed(2);
  return `${currencySymbol}${fixedValue}`;
}

5. 注册管道：在Angular应用的模块文件（如app.module.ts）中，将创建的管道声明到declarations数组中，使管道可在应用中使用。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { CurrencyPipe } from './currency.pipe';

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

6. 使用管道：在模板中使用管道，例如{{ amount | currency }}，amount为要转换的数字变量。

性能优化

1. 缓存计算结果：对于相同输入值频繁转换的场景，可以使用缓存机制。在管道类中添加一个缓存对象，每次转换前检查缓存中是否已有结果，若有则直接返回，避免重复计算。

private cache: { [key: string]: string } = {};
transform(value: number, ...args: unknown[]): string {
  const key = `${value}`;
  if (this.cache[key]) {
    return this.cache[key];
  }
  const currencySymbol = '¥';
  const fixedValue = value.toFixed(2);
  const result = `${currencySymbol}${fixedValue}`;
  this.cache[key] = result;
  return result;
}

2. 减少不必要的转换：在模板中，通过OnPush变更检测策略来优化性能。当组件输入值没有变化时，避免管道不必要的重新计算。在组件类上使用ChangeDetectionStrategy.OnPush，并确保输入值为不可变对象。

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

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

3. 批量处理：如果有多个数字需要转换，可以考虑批量处理，减少函数调用开销。例如，将多个数字组成数组传入管道，在管道内一次性处理数组中的所有数字并返回结果数组。

transform(values: number[], ...args: unknown[]): string[] {
  return values.map(value => {
    const currencySymbol = '¥';
    const fixedValue = value.toFixed(2);
    return `${currencySymbol}${fixedValue}`;
  });
}

在模板中使用时：{{ numberArray | currency }}，numberArray为包含多个数字的数组。