面试题：Angular货币转换管道国际化优化与自定义扩展

性能优化方案

数据分批处理：将大量数据分成若干批次进行渲染，避免一次性处理过多数据。例如，在服务端获取数据时，按页分批拉取，每次渲染一批货币字段，用户滚动或操作时再加载下一批。
虚拟滚动：使用Angular的虚拟滚动组件（如@angular/cdk/scrolling中的cdkVirtualFor），只渲染当前视口内的数据。这样无论数据量多大，实际渲染的DOM元素数量保持在一个较小范围，提高渲染性能。
防抖与节流：对于可能触发货币转换和重新渲染的事件（如窗口大小变化、用户切换语言等），使用防抖或节流技术。防抖确保事件在一定时间内只触发一次，节流限制事件触发频率，减少不必要的货币转换计算。
缓存计算结果：在组件级别缓存货币转换结果。如果数据没有发生变化（例如仅是视图切换而数据本身未变），直接使用缓存的转换后值，避免重复调用货币转换管道。

自定义扩展CurrencyPipe

创建自定义管道：
- 首先，创建一个新的管道类，继承自CurrencyPipe。例如：

import { Pipe, PipeTransform } from '@angular/core';
import { CurrencyPipe as AngularCurrencyPipe } from '@angular/common';

@Pipe({
  name: 'customCurrency'
})
export class CustomCurrencyPipe extends AngularCurrencyPipe implements PipeTransform {
  constructor() {
    super('en-US'); // 初始化父类，这里语言代码可根据实际需求配置
  }

  transform(value: number | string, currencyCode: string = 'USD', display: 'code' | 'symbol' | 'name' = 'symbol', digitsInfo: string = '1.2 - 2', locale: string = 'en-US'): string {
    let result = super.transform(value, currencyCode, display, digitsInfo, locale);
    if (display ==='symbol') {
      result = '自定义前缀' + result; // 在货币符号前添加自定义前缀
    }
    return result;
  }
}

在模块中声明：
- 在应用的模块（如app.module.ts）中，将自定义管道声明到declarations数组中：

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

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

在模板中使用：
- 在组件的模板中，使用自定义管道替代原有的CurrencyPipe：

<div *ngFor="let item of items">
  <span>{{item.amount | customCurrency:'CNY':'symbol'}}</span>
</div>

星途面试题库

面试题：Angular货币转换管道国际化优化与自定义扩展

知识考点

面试题答案

性能优化方案

自定义扩展CurrencyPipe