具有依赖性的角度独立管道

Question

在 Angular 18 中，是否可以有一个使用另一个管道的自定义独立管道？

这就是我正在尝试做的事情：

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

@Pipe({
    name: 'currencyZeroBlank',
    standalone: true,
})
export class CurrencyZeroBlankPipe implements PipeTransform {
    private readonly currencyPipe = inject(CurrencyPipe);

    public transform(value: number | undefined): string {
        if (value === null || value === 0) {
            return '';
        }
        return this.currencyPipe.transform(value, 'EUR')!;
    }
}

但是我明白了

NullInjectorError: No provider for _CurrencyPipe!

对于独立组件，这只是一个问题

imports: [CommonModule],

但是对于管道来说这是行不通的。可以吗，还是我需要添加一个模块并声明它？

Answer 1

不建议在 Angular 中组合管道。不应注入管道。相反，你应该将它们链接起来。这可能会更适合您的需求：

<p>{{ myNumber | currencyZeroBlank | currencyPipe : 'EUR' }}

如果您确实希望整个逻辑位于单个管道中并避免链接管道，我建议使用一个简单的 typescript/javascript 文件，其中包含您的currencyPipe 使用的函数。任何其他管道或组件和服务都可以直接使用currencyPipe 的解析函数。模板应保留管道。