Question

我正在学习Angular2，我想格式化一个数字，加上一千个逗号分隔符。据我所知，这可以使用Pipes完成，问题是我想在js文件中以编程方式格式化数字，而不是在html中（像var | number一样）。

首先，我意识到没有可以使用的NumberPipe独立管道（如果我错了，请纠正我）最相似的是@ angular2 / common中的CurrencyPipe。所以我有这样的事情：

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  templateUrl: 'test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
    public myNumber = 1000;

    constructor(private currencyPipe: CurrencyPipe) {    
        var formatted = this.currencyPipe().transform(this.myNumber, 'MXN', true); // Is this correct?
    }

}

但它会引发以下错误： 未处理的承诺拒绝：没有CurrencyPipe的提供商！ ;区域：有角度; ......

我做错了什么？

提前致谢。

此致

Answer 1

首先：您需要声明管道 - 将其添加到NgModule declarations部分：

declarations: [CurrencyPipe]

第二件事：管道不是可注射的，所以你不能通过使用Angular依赖注入系统来获取它的实例。您需要手动创建此管道的新实例，例如：

var formatted = (new CurrencyPipe()).transform(this.myNumber, 'MXN', true);

Answer 2

这实际上可以在@Injectable显示实用程序服务中工作，而与之前涉及模块的答案相比，它甚至没有什么麻烦。我导入了数据模型（如下）和管道，然后简单地添加了函数。因此，如果您不能在标记中直接使用管道，请使用此技巧！

export interface MoneyDTO extends SerializableDTO, JsonModelObjectDTO {
  value?: string;
  currency?: string;
}

import { CurrencyPipe } from '@angular/common';

formatMoney(money: MoneyDTO): string {
  const cp: CurrencyPipe = new CurrencyPipe('en-US');

  return money && money.value ? cp.transform(money.value, money.currency || 'USD', 'symbol') : null;
}

Angular2在Component.js中使用管道

2 个答案: