Angular模板中如何调用跨组件复用的公共工具类函数

问题根源 #

Angular模板只能直接调用组件实例自身的公开成员，无法直接调用外部类的静态方法，也不能访问private修饰的注入实例成员。

方案1：组件内直接绑定静态方法引用（无冗余，无需注入） #

是最符合你轻量工具类需求的方案，不需要修改原有静态工具类的定义：

export abstract class Helper {
  public static keyDown($event: KeyboardEvent) {
    // 原有逻辑保持不变
  }
}

组件侧不需要注入Helper，只需要将静态方法直接赋值给组件的公开实例属性即可：

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

@Component({ /* 你的组件原有配置 */ })
export class YourComponent {
  // 直接绑定静态方法的引用到组件实例成员
  public keyDown = Helper.keyDown;

  // 其余组件逻辑保持不变
}

模板调用方式完全不需要改动，和你最开始的写法一致：

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

方案2：改造为Angular服务（适合高频使用场景） #

如果你在大量组件中都用到了这个方法，不想每个组件都写一行属性绑定，可以改造为最简服务，实际冗余代码只有一行装饰器：

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

// 仅需加一行Injectable装饰器，指定root提供即可自动全局注册单例
@Injectable({ providedIn: 'root' })
export class Helper {
  public keyDown($event: KeyboardEvent) {
    // 原有逻辑保持不变
  }
}

组件侧直接注入公开实例即可使用，不需要额外绑定属性：

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

@Component({ /* 你的组件原有配置 */ })
export class YourComponent {
  constructor(
    // 用public修饰，模板可直接访问实例下的所有方法
    public helper: Helper
  ) {}

  // 其余组件逻辑保持不变
}

模板调用方式：

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

错误原因说明 #

1. getter不支持传参是JS/TS的固有语法特性，getter设计上就是用于获取属性值，本身不能接收参数
2. NullInjectorError错误是因为你没有给Helper类添加@Injectable装饰器，也没有在Angular的依赖注入体系中注册该类，所以注入器找不到对应的实例。

内容的提问来源于stack exchange，提问作者rmcsharry