带有TypeScript和injection的AngularJS过滤器

有人能给我举个例子，说明如何在使用依赖注入的TypeScript中创建角度过滤器。底部是我目前拥有的，工作正常，但我想做的是在我想要访问$filter的函数中，这样我就可以将return date.ToString（）行更改为$filter'date'。这样我就可以使用内置的日期过滤器来显示友好的短日期

class FriendlyDateFilter {

    public static Factory() {
        return function (input): string {
            if (angular.isDate(input)) {
                var date: Date = input;
                var today = new Date();
                var days = Math.abs(getDaysBetweenDates(today, date));
                if (days < 7) {
                    var dayInWeek = date.getDay();
                    switch (dayInWeek) {
                        case 0:
                            return "Sunday";
                            break;
                        case 1:
                            return "Monday";
                            break;
                        case 2:
                            return "Tuesday";
                            break;
                        case 3:
                            return "Wednesday";
                            break;
                        case 4:
                            return "Thursday";
                            break;
                        case 5:
                            return "Friday";
                            break;
                        case 6:
                            return "Saturday";
                            break;
                    }
                } else {
                    return date.toString();
                }
            } else {
                return input;
            }
        }

        function getDaysBetweenDates(d0, d1) {
            var msPerDay = 8.64e7;

            // Copy dates so don't mess them up
            var x0: any = new Date(d0);
            var x1: any = new Date(d1);

            // Set to noon - avoid DST errors
            x0.setHours(12, 0, 0);
            x1.setHours(12, 0, 0);

            // Round to remove daylight saving errors
                return Math.round((x1 - x0) / msPerDay);
            }
        }

    }
}

angular.module("ReadingLog").filter("FriendlyDateFilter", FriendlyDateFilter.Factory);

class-FriendlyDateFilter{
公共静电工厂（）{
返回函数（输入）：字符串{
if（角度isDate（输入））{
变量日期：日期=输入；
var today=新日期（）；
var days=Math.abs（getdaysbetween-dates（今天，日期））；
如果（天数<7天）{
var dayInWeek=date.getDay（）；
开关（每周一天）{
案例0：
返回“星期日”；
打破
案例1：
返回“星期一”；
打破
案例2：
返回“星期二”；
打破
案例3：
返回“星期三”；
打破
案例4：
返回“星期四”；
打破
案例5：
返回“星期五”；
打破
案例6：
返回“星期六”；
打破
}
}否则{
返回日期。toString（）；
}
}否则{
返回输入；
}
}
函数getDaysBetween Dates（d0、d1）{
var msPerDay=8.64e7；
//复制日期，这样就不会把它们弄乱
var x0：任何=新日期（d0）；
变量x1：任何=新日期（d1）；
//设置为中午-避免DST错误
x0.设定小时数（12,0,0）；
x1.设定小时数（12,0,0）；
//舍入以删除夏令时错误
返回数学整数（（x1-x0）/msPerDay）；
}
}
}
}
angular.module（“ReadingLog”）.filter（“FriendlyDateFilter”，FriendlyDateFilter.Factory）；

编写角度滤波器时，通常最好使用

函数

+

模块

而不是

类

。您可以这样构造代码：

function FriendlyDateFilter($filter) {
    return function (s: string): string {
        /* Your logic here */
    }
    /* Helper logic here */
}
module FriendlyDateFilter {
    export var $inject = ['$filter'];
}

angular.module("ReadingLog").filter("FriendlyDateFilter", FriendlyDateFilter);

---

如果您试图避免在全局范围中添加太多内容，也可以将这两个

FriendlyDateFilter

声明放在另一个

模块中。
我在为AngularJs 1.3和Typescript编写自己的DI系统时遇到了同样的问题。为了解决这个问题，我编写了一个decorator，它接受一个实现以下接口的类：

interface IFilter {
    filter(value?: any, ...args): any;
}

并使用以下代码注册过滤器：

var filterFactory = (...args) => {
        var filterObject = new target(...args);
        if (typeof filterObject.filter === 'function') {
            return filterObject.filter.bind(filterObject);
        }
        console.warn('Invalid filter: filter() method not found for:', filterName)
        return function() { }; //dummy filter, so it won't break everything
    };

var constructorArray: Array<any> = injector.resolveParamNames(target);
    app.filter(filterName, constructorArray.concat(filterFactory));

var filterFactory=（…args）=>{
var filterObject=新目标（…args）；
if（过滤器对象的类型过滤器=='function'）{
返回filterObject.filter.bind（filterObject）；
}
console.warn（'找不到针对：'的无效筛选器：filter（）方法，filterName）
返回函数（）{}；//伪过滤器，所以它不会破坏所有内容
};
var-constructorArray:Array和一个filter示例首先，您需要使用

然后，您只需执行以下操作：

MyFilter.$inject = ["$log"];
function MyFilter ($log: ng.ILogService): Function {
  return function(msg: string) {
    $log.log("I'm injected!");
    return msg;
  };
}
angular.module("testModule").filter("MyFilter", MyFilter);

$inject
属性在
函数中可用，这要感谢
angular.d.ts
中的这些行：

// Support for painless dependency injection
interface Function {
  $inject?: string[];
}

请参见
您可以使用类来注入依赖项，只需使用模块中的[]并使用方法注入，如下所示：

module Filters {
    export class MyFilter {
        public static Factory(injectableService: InjectableService) {
            return function (input:any) {

                // use injectableService to affect your input in desired way

                return input;
            }
        }
    }

    angular.module('app')
        .filter('myFilter', ['injectableService', MyFilter.Factory]);

是否将$filter作为参数添加到工厂函数？在JS中就是这样做的。是的，我假设这就是我需要的，但我也需要在某处/以某种方式使用$inject，这就是我不知道如何做的。在JS中，你应该做
FriendlyDateFilter.Factory.$inject=['$filter']
。或者，在构建过程中除了使用ng annotate之外，您什么都不做。我不知道在我的TypeScript类中我可以把它放在哪里。为什么不简单地执行
FriendlyDateFilter.$inject=['$filter']
而不是使用带有导出变量的模块？您可以使用
FriendlyDateFilter['$inject']=…
但是如果没有某种声明，TypeScript将不允许使用虚线语法。它将与DefinitelyTyped中的angular.d.ts一起工作，请参阅@adripanico如果您发现我的答案有用，请向上投票：）我做了！再次感谢。