面试题：Angular中如何配置货币转换管道以支持基本的国际化

Question

在Angular项目中，假设要显示不同国家的货币格式，如美元、欧元和人民币。请阐述如何配置货币转换管道`CurrencyPipe`来实现这些货币格式的正确显示，需要提及在`app.module.ts`中可能的配置步骤以及在组件模板中使用该管道的方式。

Answer 1

在 app.module.ts 中的配置步骤

1. 导入 CommonModule：CurrencyPipe 位于 CommonModule 中，因此需要在 app.module.ts 中导入 CommonModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

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

在组件模板中使用 CurrencyPipe 的方式

1. 基本使用：在组件模板中，使用 | 管道操作符来应用 CurrencyPipe。例如，假设组件中有一个变量 amount 表示金额：

<p>美元格式: {{ amount | currency:'USD' }}</p>
<p>欧元格式: {{ amount | currency:'EUR' }}</p>
<p>人民币格式: {{ amount | currency:'CNY' }}</p>

2. 自定义小数位数：可以通过在管道后添加参数来指定小数位数。例如，要显示两位小数：

<p>美元格式，两位小数: {{ amount | currency:'USD':true:'1.2 - 2' }}</p>

其中，true 表示显示货币符号，1.2 - 2 表示最小整数位数为 1，最小和最大小数位数都为 2。