根據 Culture Info 動態配置 Angular 中的數字格式

Question

我有一個 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 object）並格式化整個 angular 應用程序中顯示的所有數字。 在 Angular 中有沒有辦法做到這一點？

Answer 1

Angular 管道將整數、字符串、arrays 和日期作為輸入，用 | 分隔根據需要轉換為格式並在瀏覽器中顯示。 在插值表達式中，我們可以定義 pipe 並根據情況使用它，因為我們可以在 Angular 應用程序中使用多種類型的管道。 您應該使用 pipe 和 numberFormat 提供的多個參數。

您可以像這樣將參數傳遞給您的 pipe：

{{ whatever | mypipe: 'option1' }}

這將作為參數傳遞到您的 pipe.ts 中：

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

此鏈接可以幫助您編寫客戶 pipe。