从angular2模板调用静态函数

我正在尝试为角度项目构建"实用程序"服务(类).实用程序类具有静态函数(因此我们不必实例化不必要的对象).一个例子是:

import { Injectable } from '@angular/core';

@Injectable()
export class DateService {
   constructor() {
   }

   public static parseDate(dateString: string): Date {
       if (dateString) {
           return new Date(dateString);
       } else {
           return null;
       }
   }
}

在我的组件类文件中,然后我像这样导入它:

import { DateService } from '../utilities/date.service';

在这样的类代码中工作:

ngOnInit():void {
  let temp = DateService.parseDate("2012/07/30");
  console.log(temp);  // Mon Jul 30 2012 00:00:00 GMT-0500 (Central Daylight Time)
 }

但是,我希望能够在角度html模板中使用这些实用程序函数,如下所示:

Date
          

不幸的是,这不起作用; 给出一个"无法读取属性'的parseDate'未定义"错误.

现在,我可以将'parseDate'函数移动到组件类,并且工作正常(当然,模板中需要更改)...但是,如果我有一堆组件,他们都需要有自己的'parseDate'功能,我想我们都知道这是一个不好扩展的坏主意.(请忽略parseDate函数的微不足道的性质)

此外,即使我不想实例化一个对象只是为了运行静态函数,我尝试使用实际的依赖注入.将它添加到providers数组,并在构造函数中构建一个实例 - 如下所示:

constructor(private _dateService: DateService) { }

然后将我的模板更改为:

label for="date">Date
          

这也失败了,这次带有"self.context._dateService.parseDate不是函数"错误.从函数中删除'static'可以解决问题,我可以继续前进,但是我仍然需要实例化一些东西才能运行应该只是一个静态函数.当然有更好的方法.

思考？

只能从视图中调用组件类的实例成员.

如果要调用静态成员,则需要在组件中提供getter.

export class MyComponent {
  parseDate = DateService.parseDate;
}

(input)="event.date=parseDate($event.target.value)"

import {StaticClassFunctions} from "./static-class-functions"

export function CustomDecorator(): Function {
    return (target: Function): Function => {
        target.prototype.yourStaticMethod = (param1) => {
            return StaticClassFunctions.yourStaticMethod(param1);
        }
    }
}

@Component{ ... }
@CustomDecorator()
export class YourComponent { ... }

{{yourStaticMethod(yourInput)}}

export class YourComponent {
    public DateService= DateService;
}

{{ "2017-01-24" | date }}

@Pipe({
  name: 'myDate'
})
export class MyDate implements PipeTransform {

  transform(value: string): string {
    return new Date(value); 
  }
}