以打字稿和注射AngularJS过滤器 [英] AngularJS Filter with TypeScript and injection

问题描述

有人可以为我提供的我怎么能创造打字稿角度滤波器使用依赖注入的例子。在底部是我现在有，这是工作的罚款，但我想要做的是就是我想有机会获得$过滤器，这样我可以改线与Date.toString回报（）到$过滤功能'日期'。这样，我用的是内置的日期过滤器来显示一个漂亮友好的短日期。

 类FriendlyDateFilter {    公共静态厂（）{
        复位功能（输入）：字符串{
            如果（angular.isDate（输入））{
                VAR日期：日期=输入;
                VAR今天=新的Date（）;
                VAR天= Math.abs（getDaysBetweenDates（今日日期））;
                如果（天7;）{
                    变种dayInWeek = date.getDay（）;
                    开关（dayInWeek）{
                        情况下0：
                            返回星期天;
                            打破;
                        情况1：
                            返回星期一;
                            打破;
                        案例2：
                            返回星期二;
                            打破;
                        案例3：
                            返回周三
                            打破;
                        情况4：
                            返回星期四;
                            打破;
                        情况5：
                            返回星期五;
                            打破;
                        情况6：
                            返回星期六;
                            打破;
                    }
                }其他{
                    返回与Date.toString（）;
                }
            }其他{
                返回输入;
            }
        }        功能getDaysBetweenDates（D0，D1）{
            VAR msPerDay = 8.64e7;            //复制日期，所以不要乱起来
            VAR X0：=任何新的Date（D0）;
            VAR X1：任何=新的日期（D1）;            //设置为中午 - 避免错误DST
            x0.setHours（12，0，0）;
            x1.setHours（12，0，0）;            //回合删除夏令时错误
                返回Math.round（（X1  -  X0）/ msPerDay）;
            }
        }    }
}angular.module（ReadingLog）过滤器（FriendlyDateFilter，FriendlyDateFilter.Factory）。
 

解决方案

这是一般最好使用函数 + 模块代替类。您可以在结构code是这样的：

 函数FriendlyDateFilter（$过滤器）{
    复位功能（S：字符串）：字符串{
        / *您在这里的逻辑* /
    }
    / *辅助逻辑在这里* /
}
模块FriendlyDateFilter {
    出口变量$注射='$过滤器'];
}angular.module（ReadingLog）过滤器（FriendlyDateFilter，FriendlyDateFilter）。
 

您也可以放置在另一个两者 FriendlyDateFilter 声明模块如果你想避免增加太多在全球范围内。

Can somebody provide me with an example of how I can create an Angular Filter in TypeScript that uses dependency injection. At the bottom is what I currently have, which is working fine, but what I want to do is in is the function I want to have access to $filter, so that I can change the line return date.ToString() into $filter'date'. That way I use the built in date filter to show a nice friendly short 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);

解决方案

It's generally better to use a function+module instead of a class when writing an Angular filter. You can structure the code like this:

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

You could also place both FriendlyDateFilter declarations inside another module if you're trying to avoid adding too much to the global scope.

这篇关于以打字稿和注射AngularJS过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！