根据文化信息动态配置Angular中的数字格式

Posted 2023-04-13

【中文标题】根据文化信息动态配置Angular中的数字格式

【英文标题】：Dynamically configure the Number Formatting in Angular based on Culture Info

【发布时间】：2021-01-20 07:10:14

【问题描述】：

我有一个 API 可以返回我的 Angular 应用程序所需的格式。

  "success": true,
  "statusCode": 200,
  "message": null,
  "data": 
    "id": 1,
    "countryCode": "USA",
    "dateTimeFormat": 
      "date": "dd-MM-yyyy",
      "time": "hh:mm:ss tt"
    ,
    "currencyFormat": 
      "grouping": ",",
      "decimal": ".",
      "currency": "USD",
      "pattern": "$",
      "culture": "en-US",
      "formatSpecifier": "c",
      "decimalDigits": 2
    ,
    "numberFormat": 
      "culture": "en-US",
      "formatSpecifier": "n",
      "decimalDigits": 2
    ,
    "percentFormat": 
      "culture": "en-US",
      "formatSpecifier": "p",
      "decimalDigits": 2
    
  

我需要使用此信息（例如响应中的 numberFormat 对象）并格式化整个 Angular 应用程序中显示的所有数字。有没有办法在 Angular 中做到这一点？

【问题讨论】：

我认为你应该使用自定义管道

@ArashHatami 有没有相关的参考资料？

【参考方案1】：

Angular Pipes 将整数、字符串、数组和日期作为输入，用 | 分隔。根据需要转换为格式并在浏览器中显示。在插值表达式中，我们可以定义管道并根据情况使用它，因为我们可以在 Angular 应用程序中使用多种类型的管道。 您应该使用带有 numberFormat 提供的多个参数的管道。

您可以像这样将参数传递给您的管道：

 whatever | mypipe: 'option1' 

这将作为参数传递到您的 pipe.ts：

transform(value: any, args?: string) 
  switch (args) 
    case 'option1':
      return handleOption1(value);
    case 'option2':
      return handleOption2(value);
    ...
  

this link can help you to write custome pipe.