web-dev-qa-db-fra.com

Créer une coutume Angular filtrer avec TypeScript

J'essaie de trouver le meilleur moyen de créer un filtre personnalisé Angular avec TypeScript.

Tous les exemples de code que je vois utilisent quelque chose comme:

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

... qui fonctionne, mais semble désordonné car je veux que tout mon code de filtre soit séparé. Je veux donc savoir comment déclarer le filtre en tant que fichier séparé (par exemple, filters/reverse-filter.ts) afin de pouvoir le créer comme suit:

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

... de la même manière que vous le feriez pour les contrôleurs, les services, etc.

La documentation pour TS et Angular semble ensemble assez mince sur le terrain, en particulier en ce qui concerne les filtres - quelqu'un peut-il aider?

À votre santé!

angularjsfiltertypescript
16
Tom Evans

Les fonctions peuvent être exportées à partir de modules comme ceci:

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

puis en dehors du module:

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

Ensuite, il serait possible d’enregistrer automatiquement tous les filtres définis dans le module moduleName en itérant ses propriétés publiques.

24
Douglas

Peut-être trop tard, mais peut être utile pour quelqu'un d'autre.

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

Pour expliquer la dernière ligne:

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

Je vais ajouter un morceau de code, qui représente ma classe Bootstrap, pour que vous puissiez le comprendre.

module dashboard {
    export class Bootstrap {

        static angular:ng.IModule;

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


    }
}

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

Si vous avez besoin de plus d'informations sur son fonctionnement, vous pouvez accéder à ma propre structure TypeScript/AngularJS/Less structure ici

23
Dazag

Voici un exemple d'utilisation de l'injecteur pour obtenir des dépendances dans votre filtre. Celui-ci est injecté avec le service $ filter.

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

Vous devriez utiliser quelque chose comme ça pour injecter des dépendances

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

Vous pouvez créer un filtre en utilisant class avec une fonction statique.

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

Consommez ce filtre dans le contrôleur en utilisant la méthode ci-dessous.

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