javascript - Angular Filter + Typescript

Jag har ett mycket enkelt angularfilter.

Detta filter tar emot som indata en medlem av en uppräkning (kallad här XEnum) och returnerar strängen som representerar medlemmen i uppräkningen:

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] );

Det här fungerar mycket bra när jag använder xEnumToStringFilter i mina vyer :

{{0 | etatTransfertEnumToStringFilter}} skriv Startad

{{1 | etatTransfertEnumToStringFilter}} skriv ut Stoppad

Men jag vill använda detta filter i min tjänst:

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

Men i min servicekonstruktör får jag bara ett konstigt fel:

module Services {
    "use strict";

    export class ServiceUsingXEnum {

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

Modul Filters har ingen exporterad medlem XEnumToStringFilter

Även när min autokomplettering säger att det finns!

Jag vill använda beroendeinjektion, jag skulle kunna bara göra Filters.XEnumToStringFilter()(somethingXEnum) men det är dåligt!

Varför kan jag inte använda XEnumToStringFilter som en typ?

Vad är ett bättre sätt att lösa det?

Svar #1

Det beror på att du använder funktionen som typdeklaration. Du kan antingen:

1) Ändra tjänstens konstruktördeklaration:

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

eller

2) Skapa ett gränssnitt och använd det gränssnittet där du vill använda filtret:

module Filters {
    "use strict";

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

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

...

då i konstruktor

constructor(private xEnumToStringFilter: Filters.IXEnumToStringFunction )

Svar #2

Det pågår två saker här som jag kommer försöka ta itu med separat.

1 - Ett filter är en funktion, inte en typ

Det närmaste du kan komma att skriva detta skulle vara:

private xEnumToStringFilter: () => string

2 - Felaktig användning av ett filter i service/controller

För att använda ett filter i en tjänst/controller måste du injicera $filter-tjänsten som du kan använda för att få en referens till ditt filter via det namn som det är registrerat under, se exemplet här

Relaterade artiklar