Angular 过滤器 + TypeScript

Question

我是一个有用的助手，可以为您翻译文本。

我有一个非常简单的Angular过滤器。

该过滤器接受枚举类型（此处称为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用作类型？

有更好的解决方法吗？

- antoinestv

Answer 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 )

- Marcelo De Zen

Answer 2

这里有两件事情，我将尝试分别解释。

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

你最接近的类型可能是：

private xEnumToStringFilter: () => string

2 - 服务/控制器内不正确使用过滤器

为了在服务/控制器中使用过滤器，您必须注入$filter服务，通过注册的名称获取对应的过滤器引用，详见这里的示例。

- Brocco