在angular2中的服务中使用自定义管道

Question

我想在Injectable服务中调用我的自定义管道。我在stackoverflow中检查了很多线程。但是他们谈到在组件中使用自定义管道。请你在这里帮助我，任何有用的链接都可以。 以下是我的自定义管道文件：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'unit' })
export class UnitPipe implements PipeTransform {
    transform(val,unit, args) {
        if(unit=='Metric') {
            return val * 2;
        }
        else {
            return val * 4;
        }
    }
}

我试图在我的服务中访问此管道：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { UnitPipe } from '../pipes/UnitPipe';
@Injectable()
export class SomeService {
    constructor(http: Http, unitPipe: UnitPipe) {
        this.http = http;
        this.unitPipe = unitPipe;
    }
    transformUnit() {
        return this.unitPipe.transform('10', 'Metric');
    }
}

我已在 app.module.js

中指定了此内容

declarations: [UnitPipe],
providers: [UnitPipe]

在我的 component.js 中，我正在调用此服务方法＆amp;只需检查控制台中的输出：

import { Component, OnInit, EventEmitter, Input } from '@angular/core';
import { SomeService } from '../../services/SomeService';
@Component({
})
export class SomeClass implements OnInit {
    constructor(someService: SomeService) {
        this.someService = someService;
    }
    ngOnInit(): void {          
        console.log(this.someService.transformUnit());            
    }
}

但我得到以下错误

还有一件事是，我的计划是在我的服务文件中调用transformUnit方法，而SomeService＆＃39;可能是onload，其中存在函数定义。对此有何看法？

谢谢。

Answer 1

您的管道变换函数需要3个参数：

transform(val,unit, args) {
  ...
}

您仅向其提供2个参数：

transformUnit() {
    return this.unitPipe.transform('10', 'Metric');
}

我建议的最佳解决方案是使用 Optional / Default 参数：

可选参数-将args更改为args?

OR

默认参数-将args更改为args = null //或其他一些默认值

这将允许您使用2个参数调用管道函数，因此无需在服务中更改代码。

您可以在此TypeScirpt-Functions链接中的可选和默认参数部分中了解更多信息。

使用您的代码创建了一个简单的StackBlitz DEMO。最初，您会在SomeService文件中看到错误。只需相应地更改管道args的参数。刷新页面。错误在SomeService中消失了。