角度过滤器+打字稿

时间:2015-04-16 14:21:03

标签: javascript angularjs typescript

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

此过滤器接受输入枚举的成员(此处称为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用作类型?

有什么更好的解决方法?

2 个答案:

答案 0 :(得分:4)

那是因为您将此功能用作类型声明。你要么:

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 )

答案 1 :(得分:2)

这里有两件事我会尝试单独解决。

1 - 过滤器不是类型

的函数

您最接近键入的内容是:

private xEnumToStringFilter: () => string

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

要在服务/控制器中使用过滤器,您必须注入$filter服务,您可以使用该服务通过其注册的名称获取对过滤器的引用,请参阅示例{{3} }