Question

我正在尝试为角项目构建“实用程序”服务（类）。实用程序类具有静态函数（因此我们不必实例化不必要的对象）。一个例子是：

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

并在类似的类代码中工作：

<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">

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

constructor(private _dateService: DateService) { }

不幸的是，这不起作用;给出一个“无法读取属性'的parseDate'未定义”错误。

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

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

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">

然后将我的模板更改为：

{{1}}

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

思想？

Answer 1

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

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

export class MyComponent {
  parseDate = DateService.parseDate;
}

然后你可以像

一样使用它

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

Answer 2

Gunter的回答是完全有效的，也是我大部分时间都这样做的方式。

如果您使用的是打字稿，您还可以选择创建自定义装饰器，为视图提供功能，使您的组件保持整洁。

示例：

定义装饰器：

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 { ... }

现在您可以在视图中访问这些静态函数，而无需在Component中声明它们！对重复的“实用程序”函数非常有用，以支持视图格式化等（如枚举强制！）

<span>{{yourStaticMethod(yourInput)}}</span>

除非您在顶部声明函数以便可以编译，否则您将无法访问组件。

Answer 3

您可以在组件中声明一个字段，使您的模板可以访问该类。

export class YourComponent {
    public DateService= DateService;
}

Answer 4

在Angular中已经存在一种称为pipes的模式。在Angular 1中，这被称为filters。

在Angular中，您可以创建自定义管道类，并使用模板中的|将值传递给。有一个内置的日期，它使用如下：

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

当然，如果这个管道不能满足您的需求，您可以创建自己的管道：

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

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

有关详细信息，请参阅：https://angular.io/docs/ts/latest/guide/pipes.html

Answer 5

我曾经这样做过 -

public get DateService(): typeof DateService {
    return DateService;
}

并将其从模板中用作 -

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

它基本上是@Sergey 的版本，但以更“TypeScripty”的 getter 的形式澄清我正在返回类的 type，因此它的静态成员将在模板中公开。

从angular2模板调用静态函数

5 个答案: