Question

我目前正在使用Angular十进制管格式化我的组件内服务器的响应，如下所示：

Component.ts

private formatCells(responseData) {
    for (let i = 0; i < responseData.length; i++) {
        if  (responseData[i].value === 0) {
            responseData[i].value = this.decimalPipe.transform(responseData[i].value '1.2-2');
        } else {
            return responseData;
        }
    }
 }

我这样做是因为我使用ag-grid而且不能在模板中使用管道。

我的目标是将这个逻辑移到自定义管道中，并在我的组件内部的responseData上调用该管道。也许我不需要自定义管道，因为我只是使用decimalPipe，但我希望以后可以选择修改它。

我创建了一个自定义管道并试图将格式化功能移动到管道，但我不知道如何编写转换函数并在组件内的responseData上调用它。

myPipe.ts

import { Pipe , PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Pipe({
    name: 'customDecimalFormat',
    pure: true
})

export class CustomDecimalFormatPipe extends DecimalTransform { 
    transform(value: any) {
       //...?
       return super.transform(value, "1.2-2"); 
    }
}

如何将我的Component.ts中的功能移动到myPipe.ts？

Answer 1

虽然首先反对使用管道的逻辑，但我会给你答案。

您可以像这样构建管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Pipe({
  name: 'custom'
})
export class CustomPipe implements PipeTransform {

 constructor(public decPipe: DecimalPipe) {
  }

 transform(value: any): any {

    //here you can implement your custom logic later on as you wish     

    return this.decPipe.transform(value, "1.2-2");

  }
}

现在您的自定义管道使用Angular DecimalPipe来转换您的数字。

您可以在HTML上使用它：

<div>Used on template:<span *ngFor="let number of numbers">{{number | custom}}</span></div>

或者您可以在组件代码上使用它，就像您说的那样：

export class App implements OnInit{
  name:string;
  numbers = [1.125439];
  numberFromComponent: number;
  constructor(private customPipe: CustomPipe) {
    this.name = `Angular! v${VERSION.full}`
  }

  ngOnInit() {
    this.numberFromComponent = this.customPipe.transform(1.125439);
  }
}

我为你做了一个工作的掠夺者here

希望这能回答你的问题。

我可以在指令之外使用自定义Angular管道吗？

1 个答案: