Angular - 如何使用模板中的实用程序函数

Question

我有一个 Helper 类，它定义了一个静态方法“keyDown”，它获取按下的键。

我在几个组件中使用它，它只是定义为组件类上的一个方法，从模板中调用，如下所示：

     <input type="number"
       ...
       (keydown)="keyDown($event)"
       pattern="^(\d?[0-9]|[1-9]0)$"
       required/>

但是复制那个代码不好，所以我把它放到一个静态类中，如this question中解释的那样

export abstract class Helper {
  public static keyDown($event: any) {...}
}

组件：

import { Helper } from '../../../utils/helper';

  constructor(
    private helper: Helper,
  ) { }

  get keyDown(v) { return Helper.keyDown(v); }

这不起作用，因为您无法将值传递给 getter。

那么我怎样才能拥有一个从不同组件的模板中调用的共享实用程序函数呢？

更新 - 我试过了。

感谢@CharlesBarnes 的评论。这几乎奏效了！

我做了 3 个微妙但重要的改变：

1. 类方法不再是静态的：

    export abstract class Helper {
      public keyDown($event: any) {...}
    }

1. 注入的帮助器不再是私有的，而是公共的。这意味着模板现在可以查看助手类中的所有方法，因此可以直接调用它们：

    import { Helper } from '../../../utils/helper';
    
      constructor(
        public helper: Helper,
      ) { }

1. 最后我更改了模板，在方法调用前加上注入类的名称（小写“helper”）：

     <input type="number"
       ...
       (keydown)="helper.keyDown($event)"
       pattern="^(\d?[0-9]|[1-9]0)$"
       required/>

但它会抛出一个

NullInjectioNError, no provider for 'Helper'

:(

这种方式意味着将 Helper 类转换为服务，并使其可注入。

...但是提供一些通用帮助工具似乎有点过头了。

Answer 1

这是一个很好的开始。您已接近解决方案。

到目前为止，您只声明了一个abstract 类，现在需要由另一个可以实例化的类来实现。

@Injectable()
export class MyHelper implements Helper {
  keyDown(e: KeyboardEvent){
    console.log(e)
  }
}

现在可以提供课程了。我会在组件级别上这样做：

import { Component } from '@angular/core';
import { Helper } from './helper';
import { MyHelper } from './my-helper';

@Component({
  ...
  providers: [
    { provide: Helper, useClass: MyHelper }
  ]
})
export class AppComponent  {
  constructor(
    public helper: Helper,
  ) { }
}

HTML 保持原样。

(keydown)="helper.keyDown($event)"

我会说这实际上是一个很好的模式，因为另一个组件可能使用不同的 keydown 处理程序实现。这样可以在通过抽象类进行强类型化时保持代码解耦。