当前位置:  开发笔记 > 编程语言 > 正文

Angular2在Component.js中使用管道

如何解决《Angular2在Component.js中使用管道》经验,为你挑选了1个好方法。

我正在学习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?
    }

}

但它会引发以下错误: 未处理的Promise拒绝:没有提供CurrencyPipe!; 区域:棱角分明; ......

我究竟做错了什么?

提前致谢.

问候



1> Daniel Kucal..:

第一件事:您需要声明管道 - 将其添加到NgModule declarations部分:

declarations: [CurrencyPipe]

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

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


嗨@DeepakPathak,谢谢你的问题,这里的指令已经过时并导致错误.在以前的Angular版本中,它还使用管道添加到**组件的**(这是重要的)提供程序,我已经更新了答案.组件,管道和指令应放在`declarations`中.`imports`用于将一个NgModule导入另一个.
推荐阅读
臭小子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有