从angular2模板调用静态函数 [英] Call static function from angular2 template

问题描述

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

I'm trying to build 'utility' services (classes) for an angular project. The utility classes have static functions (so we don't have to instantiate needless objects). One example is this:

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

然后在我的组件类文件中，将其导入，如下所示:

In my component class file, I then import it like so:

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

，并且在类似这样的类代码中:

and within the class code like this works:

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

但是，我希望能够在angular html模板中使用这些实用程序功能，如下所示:

However, I would like to be able to use these utility functions within the angular html template, like so:

<label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=DateService.parseDate($event.target.value)" name="date">

不幸的是，这行不通；给出无法读取未定义的属性'parseDate'"错误.

Unfortunately, that does not work; giving a "Cannot read property 'parseDate' of undefined" error.

现在，我可以将'parseDate'函数移至组件类，并且可以正常工作(当然，需要在模板中进行必要的更改)...但是，如果我有很多组件，它们会所有人都需要拥有自己的"parseDate"功能，我想我们都知道这是一个不好的想法，无法很好地扩展. (请忽略parseDate函数的琐碎性质)

Now, I can move the 'parseDate' function to the component class, and that works fine (with the required change in the template, of course)... however, if I have a bunch of components, they'd all need to have their own 'parseDate' function and I think we all know that's a bad idea that doesn't scale well. (please ignore the trivial nature of the parseDate function)

此外，即使我真的不想实例化对象只是为了运行静态函数，我还是通过实际的依赖注入来尝试它.将其添加到provider数组，并在构造函数中构建实例-

Further, even though I don't really want to instantiate an object just to run a static function, I try it with actual dependency injection. Adding it to the providers array, and building a instance in the constructor - like so:

constructor(private _dateService: DateService) { }

然后将我的模板更改为:

and then changing my template to:

label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=_dateService.parseDate($event.target.value)" name="date">

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

This also fails, this time with a with a "self.context._dateService.parseDate is not a function" error. Removing the 'static' from the function fixes the problem and I could move on, but I'm still left needing to instantiate something just to run what should be just a static function. Surely there is a better way.

有想法吗?

推荐答案

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

Only instance members of the components class can be called from the view.

如果要调用静态成员，则需要在组件中提供一个吸气剂.

If you want to call static members, you need to provide a getter in the component.

export class MyComponent {
  parseDate = DateService.parseDate;
}

然后您可以像使用它

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

这篇关于从angular2模板调用静态函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！