如何初始化 Angular 管道 (CurrencyPipe)

Question

正在阅读 official docs 我对如何在 Angular 中初始化管道感到困惑。

当我阅读文档时

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

我将其解释为我应该能够使以下内容正常工作

// component.ts
import { CurrencyPipe } from '@angular/common'; 
// component.html
<div>{{ myNumber | CurrencyPipe [ : "USD" [ : "symbol" [ : "0.0-0" ] ] ] }}</div>

但显然这是行不通的。

两个见解可以完全回答我的问题：1) 对文档符号试图表达的内容的解释，以及 2) 我如何实现我想要的管道

这是一个最小的可重现示例 (mre)。我在一个更大的项目中工作，所以如果需要更多信息，请告诉我。

// mre.component.ts
import { CurrencyPipe } from '@angular/common'; 
import { Component } from '@angular/core';

@Component({
  selector: 'mre',
  templateUrl: './mre.component.html',
  styleUrls: ['./mre.component.css'] // This is a blank file
});
export class MreComponent {
  constructor() {
      console.log(CurrencyPipe); // This line is only here so typescript won't be angry
  };
  public myNumber: number = 1234.56;
}
// mre.component.html
<div>
     <p>{{ myNumber | currency }}</p>
</div>

如果我在 mre.module.ts 中包含 BrowserModule，那么我会在运行时收到以下错误。 Error: BrowserModule has already been loaded.

我删除了 Browser Module（让它保持原样），现在可以使用了。显然我在这些步骤之间改变了一些东西，但我不知道那是什么。谢谢您的帮助。抱歉，除了我最初给出的例子之外，我没有对我尝试过的案例进行足够的描述。

Answer 1

您不需要初始化货币管道，它内置于Angular。您只需要确保您的模块文件正在导入 CommonModule。在您的示例中，您的语法有点偏离。为确保您已正确导入管道，请尝试这样做，

<div>{{ myNumber | currency }}</div>

这将使用具有所有默认格式的货币管道。然后一旦你完成了工作，你就可以开始添加一些格式化参数，

<div>{{ myNumber | currency:'USD':'code':'.2-2' }}</div>

可以找到您可以为每个格式设置选项提供的不同值 here

如何初始化 Angular 管道 (CurrencyPipe)

How to initialize Angular Pipe (CurrencyPipe)

formatting

pipe

angular