Angular Typescript - 在控制器内使用自定义过滤器答案

【问题标题】：Angular Typescript - using a custom filter inside a controllerAngular Typescript - 在控制器内使用自定义过滤器
【发布时间】：2017-06-25 19:23:45
【问题描述】：

我的 Angular 应用程序（打字稿）中有一个自定义过滤器，如下所示：

namespace InterACT {
  export namespace Filters {
    export class ContractAppliedTo {
      public static onFilterApplied(contract: Interfaces.IReimbursementContract) {
        if (contract.services && contract.services.length > 0) {
          return _.map(contract.services, 'regNumber').join(', ');
        } else if (contract.operator) {
          return contract.operator.name;
        }
        return contract.scheme.abbreviation;
      }
    }
  }
}

angular
  .module('app.settlement')
  .filter('contractAppliedTo', () => { return InterACT.Filters.ContractAppliedTo.onFilterApplied; });

我可以像其他内置过滤器一样在我的标记中使用这个过滤器：

{{rule | contractAppliedTo}}

我现在需要在控制器中使用此过滤器，并且正在努力如何引用它以供使用。

我已经在我的一些控制器中使用了角度日期过滤器，并且在这些控制器的构造函数中，我正在注入 ng.IFilterService 并分配给一个私有变量以供以后使用。

namespace InterACT {
  export namespace Controllers {
    export class MyController {

      public static $inject = ['$filter'];
      constructor(
        private $filter: ng.IFilterService
            ) {
            }

            public someFunction = () => {
                let dateFilter = this.$filter('date'),
                    foo;

                foo = dateFilter('some-date-string', 'd-M-Y');
            }
        }
    }
}

在使用我的 ContractAppliedTo 过滤器时，我无法让控制器识别它以供我使用，或者我猜我的意思是打字稿编译器不会选择它。

我想知道是否可以使用过滤器服务来获取我的新过滤器的实例，例如：

let contractAppliedTo = this.$filter('contractAppliedTo')

但是当我尝试使用它时，我得到一个打字稿错误提示

[ts] Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures.

我想我缺少一个界面以便能够在我的控制器中使用此过滤器。

有人可以提供进一步的建议吗？

谢谢

【问题讨论】：

标签： angularjs typescript

【解决方案1】：

这个问题是FilterService 找不到自定义过滤器的调用签名。我能够通过导入自定义过滤器并使用type assertion 来解决这个问题，而不是使用$filter 服务。

const contractAppliedTo: contractAppliedTo = 
      (<contractAppliedTo>this.$filter('contractAppliedTo'));

【讨论】：