Angular i18n 和本地化：如何根据语言环境检索货币符号？

Question

I am using Angular 13 and I would like to figure out how to retrieve currency symbol according to locales. I am using Angular's localize package and i18n to translate text and data. Everything works fine in both versions (English and Italian - translations files are not linked) except that when running server with configuration set to my italian version of the app, instead of displaying € it displays USD. My goal would be to display € when app is running in italian.

On Angular's docs I have found out a function called getCurrencySymbol but I wasn't able to figure out how to implement it properly.

It may seem easy but as a junior, I could not find a proper solution.

Here some of my settings:

angular.json

 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "cli": { "analytics": false }, "version": 1, "newProjectRoot": "projects", "projects": { "i18ndemo": { "projectType": "application", "i18n": { "locales": { "it": "src/locale/messages.it.xlf" } }, "schematics": { "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/i18ndemo", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true }, "it": { "localize": [ "it" ] } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "i18ndemo:build:production" }, "development": { "browserTarget": "i18ndemo:build:development" }, "it": { "browserTarget": "i18ndemo:build:it" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "i18ndemo:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } } } } }, "defaultProject": "i18ndemo" }

html

 <div class="card"> <h1 i18n="@@title" class="text-center">Your order is on it's way!</h1> <div class="d-flex align-items-center"> <img src="../../assets/delivery.png" alt="Delivery truck clipart" i18n-alt="@@image-alt"> <table class="table"> <thead> <tr> <th scope="col" i18n="@@items">Items</th> <th scope="col" i18n="@@quantity">Qty</th> <th scope="col" i18n="@@amount">Amount</th> </tr> </thead> <tbody> <tr *ngFor="let item of items"> <td>{{ item.name }}</td> <td> {{ item.quantity }}</td> <td>{{ item.price | currency }}</td> </tr> <tr> <td> {{ currentDate | date }} </td> <td i18n="@@total">Total </td> <td>{{ 75.60 | currency }}</td> </tr> </tbody> </table> </div> <p class="text-center" i18n="@@subtitle">Your order has been processed. Thank you for shopping with us &hearts;</p> </div>

 import { Component } from '@angular/core'; export interface Item { name: string, quantity: number, price: number } @Component({ selector: 'app-card', templateUrl: './card.component.html', styleUrls: ['./card.component.css'] }) export class CardComponent { currentDate = new Date(); items: Item[] = [ { name: $localize`:@@sunscreen:High protection sunscreen SPF50+`, quantity: 2, price: 35.90 }, { name: $localize`:@@nail-polish:Nail polish`, quantity: 3, price: 28.50 }, { name: $localize`:@@perfume:Lilac and lavander natural perfume`, quantity: 1, price: 13.30 }, { name: $localize`:@@shampoo:Shampoo for sensitive scalp`, quantity: 1, price: 15.90 }, ] }

Answer 1

Found a handy solution. I know my case is peculiar because in a real use case, data would be retrieved from different databases for different locales, but since I was developing a demo project to test i18n on Angular, I needed two different currencies for the same value. Anyway, this is what has been done:

 providers: [{ provide: DEFAULT_CURRENCY_CODE, useFactory: (locale: string) => locale === 'it' ? 'EUR' : 'USD', deps: [LOCALE_ID] }],

and in my html I am using Angular's currency pipe.