角度过滤器 + 打字稿答案

【问题标题】：Angular Filter + Typescript角度过滤器 + 打字稿
【发布时间】：2015-06-23 00:40:00
【问题描述】：

我有一个非常简单的角度滤镜。

这个过滤器输入一个枚举成员（这里称为 XEnum）并返回代表枚举成员的字符串：

module Filters {
    "use strict";

    export function XEnumToStringFilter() {
        return ( input: XEnum ) => {
            return XEnum[input];
        }
    }
}

[...]

module Model {
    export enum XEnum{
        Started = 0,
        Stopped = 1
    }
}

[...]

app.filter( "xEnumToStringFilter", [Filters.XEnumToStringFilter] );

当我在视图中使用 xEnumToStringFilter 时效果很好：

{{0 | etatTransfertEnumToStringFilter}}打印Started

{{1 | etatTransfertEnumToStringFilter}}打印Stopped

但我想在我的服务中使用这个过滤器：

app.service( "serviceUsingXEnum",
        ["xEnumToStringFilter",
            Services.ServiceUsingXEnum] );

但在我的服务构造函数中，我只得到一个奇怪的错误：

module Services {
    "use strict";

    export class ServiceUsingXEnum {

        constructor(
            private xEnumToStringFilter: Filters.XEnumToStringFilter // error here
            ) {
            // some beautiful code ...
        }
    }
}

模块Filters没有导出成员XEnumToStringFilter

即使我的自动完成功能说它存在！

我想使用依赖注入，我可以做 Filters.XEnumToStringFilter()(somethingXEnum) 但这很糟糕！

为什么我不能使用 XEnumToStringFilter 作为类型？

有什么更好的方法来解决它？

【问题讨论】：

标签： javascript angularjs typescript

【解决方案1】：

那是因为您将函数用作类型声明。你要么：

1) 更改服务的构造函数声明：

constructor(private xEnumToStringFilter: ( enum: XEnum ) => string )

或

2) 创建一个接口并在你想使用过滤器的地方使用它：

module Filters {
    "use strict";

    export interface IXEnumToStringFunction {
          ( input: XEnum ) => string
    }

    export function XEnumToStringFilter() {
        return ( input: XEnum ) => {
            return XEnum[input];
        }
    }
}

...

然后在构造函数中

constructor(private xEnumToStringFilter: Filters.IXEnumToStringFunction )

【讨论】：

【解决方案2】：

这里有两件事我将尝试分别解决。

1 - 过滤器是函数而不是类型

您可以输入的最接近的内容是：

private xEnumToStringFilter: () => string

2 - 服务/控制器内部过滤器使用不当

为了在服务/控制器中使用过滤器，您必须注入 $filter 服务，您可以使用该服务通过注册的名称获取对过滤器的引用，请参见示例 here

【讨论】：