阅读官方文档时,我对如何在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(解释doc符号试图表达的内容,以及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
(保持原样(,现在它可以工作了。很明显,我在两步之间换了一些东西,但我不知道是什么。谢谢你的帮助。很抱歉,在我最初给出的例子之外,我没有对我尝试过的案例进行足够的描述。
您不需要初始化货币管道,它内置在Angular中。您只需要确保您的模块文件正在导入CommonModule
。在你的例子中,你的语法有点错误。为了确保你正确地导入了管道,试试这个,
<div>{{ myNumber | currency }}</div>
这将使用具有所有默认格式的货币管道。然后,一旦你完成了这项工作,你就可以开始添加一些格式化参数,
<div>{{ myNumber | currency:'USD':'code':'.2-2' }}</div>
您可以为每个格式化选项提供的不同值可以在这里找到