it-swarm.com.de

Benutzerdefiniert erstellen Angular filtern mit TypeScript

Ich versuche, die beste Methode zum Erstellen eines benutzerdefinierten Angular - Filters mit TypeScript herauszufinden.

Alle Codebeispiele, die ich sehe, verwenden etwa Folgendes:

myModule.filter( "myFilter", function()
{
    return function( input )
    {
        //  filter stuff here
        return result;
    }
}

... was funktioniert, aber es scheint unordentlich zu sein, da ich meinen gesamten Filtercode getrennt halten möchte. Ich möchte also wissen, wie man den Filter als separate Datei deklariert (zB filters/reverse-filter.ts), damit ich ihn wie folgt erstellen kann:

myModule.filter( "filterName", moduleName.myFilter );

... genauso wie bei Controllern, Services etc.

Die Dokumentation für TS und Angular zusammen erscheint auf dem Boden ziemlich dünn, besonders wenn es sich um Filter handelt. Kann jemand helfen?

Prost!

16
Tom Evans

Funktionen können wie folgt aus Modulen exportiert werden:

module moduleName {
    export function myFilter()
    {
        return function(input)
        {
            //  filter stuff here
            return result;
        }
    }
}

dann außerhalb des Moduls:

myModule.filter("filterName", moduleName.myFilter);

Es wäre dann möglich, alle im Modul moduleName definierten Filter automatisch zu registrieren, indem die öffentlichen Eigenschaften durchlaufen werden.

24
Douglas

Vielleicht zu spät, kann aber für andere nützlich sein.

module dashboard.filters{

    export class TrustResource{

        static $inject:string[] = ['$sce'];

        static filter($sce:ng.ISCEService){

            return (value)=> {
                return $sce.trustAsResourceUrl(value)
            };
        }
    }
}     
    dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);

Um die letzte Zeile zu erklären:

dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);)

Ich füge ein Stück Code hinzu, das meine Bootstrap-Klasse darstellt, damit Sie es verstehen können.

module dashboard {
    export class Bootstrap {

        static angular:ng.IModule;

        static start(){        
            Bootstrap.angular = angular.module('EmbApp', dashboard.Bootstrap.$inject);
        }


    }
}

//run application
dashboard.Bootstrap.start();

Wenn Sie weitere Informationen zur Funktionsweise benötigen, können Sie meine eigene TypeScript/AngularJS/Less-Struktur hier abrufen.

23
Dazag

Hier ein Beispiel mit dem Injektor, um Abhängigkeiten in Ihren Filter zu bekommen. Dieser wird mit dem $ filter-Service eingespritzt.

export class CustomDateFilter {
    public static Factory() {
        var factoryFunction = ($filter: ng.IFilterService) => {
            var angularDateFilter = $filter('date');
            return (theDate: string) => {
                return angularDateFilter(theDate, "yyyy MM dd - hh:mm a");
            };
        };

        factoryFunction.$inject = ['$filter'];

        return factoryFunction;
    }
}

// and in the bootstrap code:
app.filter('customDate', your.module.CustomDateFilter.Factory());
4
BrianPMorin

Sie sollten so etwas verwenden, um Abhängigkeiten einzufügen

   myModule.filter('filterName', ['$http', moduleName.myFilter]);
1
Michel Ank

Sie können einen Filter mithilfe einer Klasse mit einer statischen Funktion erstellen.

export class FilterClass
{
 static id = "FilterId"; //FilterName, use while consume

 /*@ngInject*/
 public static instance() { //static instance function
    let dataFilter  = () => {
        let filteredObject = () => {
            //filter logic
             return filteredData;
        }
        return filteredObject;  
    }
    return dataFilter;
}   
}
//Module configuration 
angular.module(myModule).filter(FilterClass.id, FilterClass.instance());

Verbrauchen Sie diesen Filter in der Steuerung auf folgende Weise.

 let FilterFun:any = this.$filter('FilterId');
 let Filteroutput = FilterFun();
0
chirag