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

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

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

<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'错误".

现在,我可以将"parseDate"函数移到Component类中,这可以很好地工作(当然,需要对模板进行必要的更改)……然而,如果我有一堆组件,它们都需要有自己的"parseDate"函数,我想我们都知道这不是一个伸缩性很好的坏主意.(请忽略parseDate函数的琐碎性质)

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

constructor(private _dateService: DateService) { }

然后将我的模板更改为:

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.\u dateService.parseDate不是函数"错误.从函数中删除"static"修复了这个问题,我可以继续,但我仍然需要实例化一些东西来运行一个静态函数.当然还有更好的办法.

有什么 idea 吗?

推荐答案

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

如果要调用静电会员,需要在组件中提供getter.

export class MyComponent {
  parseDate = DateService.parseDate;
}

然后你可以像这样使用它

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

Angular相关问答推荐

导入浏览器模块时出错已导入commonModule的insted,animationBrower也显示错误,当p打开时

如何跨不同组件使用ng模板

如何在init为FALSE时以Angular 初始化主拇指擦除器-Swiper 11.0.6Angular 17 SSR

如何使用新的@for遍历Angular 为17的对象?

带有搜索功能的CDK-VIRTUAL-SCROLL-VIEPORT不显示该值

未在ng bootstrap 模式中设置表单输入

笔刷Angular 为17

MonoTypeOperatorFunction不可分配给OperatorFunction类型的参数

ngrx 效果等到从初始值以外的其他状态收到响应

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

Angular 重新渲染仅使用ngrx在表中更改的行

MatTooltip 显示在 html 原生对话框下方

显示 1 个数据而不是所有 ngFor - Angular 11

类继承支持

Angular2 ngFor跳过第一个索引

如何测试 Angular2 的 router.navigate?

Angular2 中的providers提供者是什么意思?

Angular 5 测试:如何获取对子组件的引用

在Angular2中获取服务的域名

Angular 中 polyfills.ts 文件有什么用