Написание собственного углового канала, который расширяет валютный канал для сокращения больших значений, при этом все еще используя функциональность основного валютного канала

Question

У меня есть несколько больших значений, которые я хотел бы представить в виде валюты, но я также хотел бы сократить эти большие значения.

Так, например.У меня может быть следующая переменная, содержащая число: 342058042

В настоящее время я использую денежную трубу для этого значения: {{price |currency}}

, который выглядит на приведенной веб-странице примерно так:мой собственный пользовательский валютный канал, чтобы сделать это без проблем, но я бы предпочел расширить встроенный валютный канал, потому что я не хочу заново изобретать всю функциональность, обрабатываемую встроенным валютным каналом (обработка локали, запятые, размещение символа, который мог быть доили после числового значения, и много других преимуществ во встроенной валютной трубе).

Я попытался связать пользовательскую трубу (которая делает только аббревиатуру), которая затем передает данные в валютную трубу, но во встроенную валютную трубуне принимает строки, а только цифры.

Также обратите внимание, как десятичное значение округляется до .06 с .058

Заранее благодарим за помощь.

Answer 1

Один выбор использует Regex

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

@Pipe({
  name: 'abbreviatenumber'
})
export class AbbreviatedNumberPipe extends CurrencyPipe {

  transform(value: any, symbol?): string {
    let acr = null;
    let fractionSize = '0.0-0';//decimals for abbreviated numbers
    if(Math.abs(value)>1000000){
      acr = 'M';
      value /= 1000000;
    } else if(Math.abs(value)>1000){
      acr = 'k';
      value /= 1000;
    } else if(Math.abs(value)>100){
      fractionSize = '0.2-2';
    }
    let formatedByCurrencyPipe = super.transform(value, symbol, 'symbol', fractionSize);
    let formatedByMe = acr?formatedByCurrencyPipe.replace(/([\d\.\,]*)/, '$1'+acr):formatedByCurrencyPipe;
    return formatedByMe;
  }
}