面试题：Angular货币转换管道国际化下动态切换语言与货币

Question

在一个Angular应用里，用户可以在界面上动态切换语言（如从英语切换到中文），同时货币显示也要根据当前用户选择的地区（如美国、中国）进行相应改变。请描述实现这个功能的整体思路，包括如何在服务中管理语言和地区的状态，以及如何在组件中通过`CurrencyPipe`实现货币格式的动态更新。

Answer 1

1. 服务中管理语言和地区状态

   • 创建一个服务，例如LanguageAndRegionService。
   • 在服务中定义属性来存储当前语言和地区状态，比如：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class LanguageAndRegionService {
     private _language: string;
     private _region: string;
   
     constructor() {
       // 可以设置默认值
       this._language = 'en';
       this._region = 'US';
     }
   
     get language(): string {
       return this._language;
     }
   
     set language(value: string) {
       this._language = value;
     }
   
     get region(): string {
       return this._region;
     }
   
     set region(value: string) {
       this._region = value;
     }
   }
   

   • 提供方法来更新语言和地区状态，其他组件可以通过注入该服务来获取和更新这些状态。

2. 组件中通过CurrencyPipe实现货币格式动态更新

   • 在组件中注入LanguageAndRegionService和CurrencyPipe。

   import { Component } from '@angular/core';
   import { CurrencyPipe } from '@angular/common';
   import { LanguageAndRegionService } from './language - and - region.service';
   
   @Component({
     selector: 'app - my - component',
     templateUrl: './my - component.html'
   })
   export class MyComponent {
     currencyValue: number = 1000;
   
     constructor(private languageAndRegionService: LanguageAndRegionService, private currencyPipe: CurrencyPipe) {}
   
     getFormattedCurrency() {
       const locale = this.languageAndRegionService.language + '-' + this.languageAndRegionService.region;
       return this.currencyPipe.transform(this.currencyValue, 'currency', 'code', '1.2 - 2', locale);
     }
   }
   

   • 在模板中调用获取格式化货币的方法：

   <div>
     Formatted Currency: {{ getFormattedCurrency() }}
   </div>
   

   • 当语言或地区在服务中更新时，组件会检测到变化并重新调用getFormattedCurrency方法，从而实现货币格式的动态更新。同时，为了确保组件能及时检测到服务中的变化，可以使用BehaviorSubject或Observable来代替简单的属性，这样在值变化时可以通知组件进行更新。例如，修改LanguageAndRegionService如下：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class LanguageAndRegionService {
     private _languageSubject = new BehaviorSubject<string>('en');
     private _regionSubject = new BehaviorSubject<string>('US');
   
     get language$() {
       return this._languageSubject.asObservable();
     }
   
     get region$() {
       return this._regionSubject.asObservable();
     }
   
     setLanguage(language: string) {
       this._languageSubject.next(language);
     }
   
     setRegion(region: string) {
       this._regionSubject.next(region);
     }
   }
   

   • 组件中订阅这些Observable：

   import { Component, OnInit } from '@angular/core';
   import { CurrencyPipe } from '@angular/common';
   import { LanguageAndRegionService } from './language - and - region.service';
   import { takeUntil } from 'rxjs/operators';
   import { Subject } from 'rxjs';
   
   @Component({
     selector: 'app - my - component',
     templateUrl: './my - component.html'
   })
   export class MyComponent implements OnInit {
     currencyValue: number = 1000;
     private destroy$ = new Subject<void>();
   
     constructor(private languageAndRegionService: LanguageAndRegionService, private currencyPipe: CurrencyPipe) {}
   
     ngOnInit() {
       this.languageAndRegionService.language$.pipe(takeUntil(this.destroy$)).subscribe(() => {
         this.updateCurrencyFormat();
       });
       this.languageAndRegionService.region$.pipe(takeUntil(this.destroy$)).subscribe(() => {
         this.updateCurrencyFormat();
       });
     }
   
     updateCurrencyFormat() {
       const locale = this.languageAndRegionService.language + '-' + this.languageAndRegionService.region;
       this.formattedCurrency = this.currencyPipe.transform(this.currencyValue, 'currency', 'code', '1.2 - 2', locale);
     }
   
     ngOnDestroy() {
       this.destroy$.next();
       this.destroy$.complete();
     }
   }