具有依赖项的 Angular Typescript 过滤器答案

【问题标题】：Angular Typescript Filter with Dependencies具有依赖项的 Angular Typescript 过滤器
【发布时间】：2015-10-17 02:54:10
【问题描述】：

我正试图弄清楚如何在打字稿中编写一个角度过滤器（这是让我绊倒的部分）一些注入。

这是我目前所拥有的：

export function StrLimit() {
  return function(input, limit) {
    if (input.length <= limit) {
      return input;
    }
    return $filter('limitTo')(input, limit) + '...';
  }
}

angular.module('myApp').filter('strLimit', StrLimit);

我需要注入$filter，并且我想为此使用本机 TS。关于如何进行此操作的任何想法？

编辑：我看过this question's answer关于这个话题，但是使用模块似乎很草率，特别是因为以上所有内容都已经嵌套在模块中。

【问题讨论】：

export function StrLimit($filter) { 和 .filter('strLimit', ['$filter', StrLimit]); 有什么问题？

标签： angularjs typescript angular-filters

【解决方案1】：

在过滤器的注册中注入 $filter 属性让它为我工作：

export class TableStrictFilter{
    public static Factory($filter:ng.IFilterService) {
        return (input:any, predicate:any) => {
            return $filter('filter')(input, predicate, true);
        }
    }
}

注册过滤器：

.filter('tableStrictFilter',['$filter', TableStrictFilter.Factory]);

【讨论】：

【解决方案2】：

在我的项目中，我们像这样使用$inject 属性：

export function StrLimit($filter) {
  return function(input, limit) {
    if (input.length <= limit) {
      return input;
    }
    return $filter('limitTo')(input, limit) + '...';
  }
}
StrLimit.$inject = ['$filter'];

angular.module('myApp').filter('strLimit', StrLimit);

如果你有一个 typescript 类，它将是 public static var $inject = ['$filter'];

【讨论】：