AngularJS Lọc với TypeScript và tiêm

Question

Ai đó có thể cung cấp cho tôi một ví dụ về cách tôi có thể tạo Bộ lọc góc trong TypeScript sử dụng tính năng tiêm phụ thuộc. Ở phía dưới là những gì tôi hiện đang có, mà làm việc tốt, nhưng những gì tôi muốn làm là trong là chức năng tôi muốn có quyền truy cập vào $ lọc, để tôi có thể thay đổi ngày trở về dòng. ToString() thành $ lọc 'ngày'. Bằng cách đó tôi sử dụng bộ lọc ngày tháng được xây dựng để hiển thị một ngày ngắn thân thiện.

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

Answer 1

Đó là nói chung tốt hơn để sử dụng một function + module thay vì một class khi viết một bộ lọc góc. Bạn có thể cấu trúc mã như thế này:

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

Bạn cũng có thể đặt cả hai FriendlyDateFilter tờ khai bên module khác nếu bạn đang cố gắng để tránh thêm quá nhiều đến phạm vi toàn cầu.

Answer 2

Tôi đã gặp sự cố tương tự khi viết hệ thống DI của riêng mình cho AngularJs 1.3 & Loại bản ghi. Để giải quyết việc này tôi đã viết một trang trí chấp nhận một lớp mà thực hiện giao diện sau:

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

và nó đăng ký bộ lọc với đoạn mã sau:

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

Thư viện của tôi sử dụng một phiên bản tùy chỉnh của nguyên cảo trình biên dịch, có thể phát ra siêu dữ liệu giao diện được sử dụng bởi injector.resolveParamNames để xây dựng mảng xây dựng cổ điển như thế này: ['$q', '$timeout', FilterFactory]

Bạn có thể tìm thấy dự án của tôi here và một mẫu bộ lọc here

Answer 3

Trước tiên, bạn cần sử dụng angular.d.ts definition file.

Sau đó, bạn chỉ cần làm như sau:

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 tài sản có sẵn trong Function nhờ những dòng này trong angular.d.ts:

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

Xem https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/angularjs/angular.d.ts#L12

Answer 4

Bạn có thể sử dụng các lớp để tiêm phụ thuộc, chỉ cần sử dụng [] trong mô-đun và sử dụng phương pháp tiêm như sau:

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