Angular 7中从HTML调用独立类静态方法报错，求可行方案

当然可行！你遇到的TypeError: Cannot read property 'msg1' of undefined报错，本质是Angular模板的作用域限制导致的——模板的上下文是对应的组件实例，只有组件类中暴露的属性/方法才能被模板直接访问，你直接在模板里写Message.msg1，模板根本找不到Message这个类。

下面是具体的解决步骤：

1. 优化Message类（可选但推荐） #

你的Message类用了@Injectable装饰器，但静态方法属于类本身，不需要依赖注入实例化，所以可以去掉这个装饰器（如果这个类还有需要注入的实例方法，保留也不影响静态方法的使用）：

// message.ts
export class Message {
  constructor() { }

  public static msg1(items: { x: string, y: string }): string {
    // 你的业务逻辑代码，比如：
    return `x的值是${items.x}，y的值是${items.y}`;
  }
}

2. 在组件中暴露Message类 #

在需要调用这个静态方法的组件类中，先引入Message，然后定义一个组件属性指向这个类，把它暴露给模板：

// your-component.component.ts
import { Component } from '@angular/core';
import { Message } from './message'; // 注意路径要和你的文件位置匹配

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 把Message类挂载到组件实例上，让模板能访问到
  public Message = Message;
}

3. 模板中正常调用 #

现在模板里的代码就可以正常工作了，和你原来的写法一致：

<div> {{ Message.msg1({ 'x': 'abc', 'y': 'def' }) }} </div>

额外小技巧 #

如果多个组件都需要调用这个静态方法，你也可以把它封装成一个Angular管道（Pipe），这样不用每个组件都手动暴露Message类。不过如果只是少数组件使用，上面的方法更直接简单。

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