Question

我正按照本answer中的说明，将DecimalPipe注入自定义管道。

代码如下：

@Pipe({name: 'irc'})
export class IRCurrencyPipe implements PipeTransform {

  constructor(private decimalPipe: DecimalPipe) {}

  transform(value: string | number, type: string = 'rial') {
    value = Number(value);
   if (isNaN(value)) { throw new Error(`${value} is not a acceptable number`); }
    return this.decimalPipe.transform(value, '1.0-0') + ' ریال';
  }
}

但是从此代码运行测试时出现TypeError: Cannot read property 'transform' of undefined错误。

我还尝试按照this answer中的建议扩展DecimalPipe ：

@Pipe({name: 'irc'})
export class IRCurrencyPipe extends DecimalPipe implements PipeTransform {


  transform(value: string | number, type: string = 'rial') {
    value = Number(value);
    if (isNaN(value)) { throw new Error(`${value} is not a acceptable number`); }
    return super.transform(value, '1.0-0') + ' ریال';
  }
}

但是我得到：Error: InvalidPipeArgument: 'Cannot read property 'toLowerCase' of undefined' for pipe 'DecimalPipe'在这种情况下。是否有一种可行的解决方案，可以以与自定义管道成角度的方式使用其中一个内置管道？

Answer 1

我尝试过，并且得到了结果。查看代码

import { DecimalPipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'currency'})
export class CurrencyPipe extends DecimalPipe implements PipeTransform {
    transform(value: string | number, type: string = 'rial') {
        value = Number(value);
        if (isNaN(value)) { throw new Error(`${value} is not a acceptable number`); }
        return super.transform(value, '1.0-0') + ' ریال';
    }
}

Answer 2

未设置LOCALE_ID时会发生这种情况。您可以这样设置：

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from '../src/app/app.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

请参见full docs here

Answer 3

在单元测试中，您需要注册任何非默认语言环境（除了提供LOCALE_ID之外）：

import localeFr from '@angular/common/locales/fr';

beforeEach(() => {
  registerLocaleData(localeFr);
});

请参见https://angular.io/guide/i18n#i18n-pipes

尝试对自定义管道使用DecimalPipe时出现Angular6错误

3 个答案: