Angular中如何在{{}}内调用函数？解决_co.t is not a function报错

这个问题我太熟悉啦！核心原因是Angular模板的作用域限制——模板里只能直接访问组件类实例上的属性和方法，你直接从外部文件导入的函数t并不在组件的上下文里，所以模板会报错找不到它；而console.log()是在组件的TS代码里执行的，这里你已经导入了t函数，自然能正常调用。

下面给你两种可行的解决方法：

方法一：把外部函数挂载到组件类上 #

这是最直接的快速解决方案，只需要在组件类里把导入的函数赋值给类的属性，让模板能访问到：

// 组件的TS文件
import { Component } from '@angular/core';
import t from '../../translate/interface';

@Component({
  selector: 'app-your-component',
  template: `<div>{{ t('Apple') }}</div>` // 现在模板能访问到组件的t属性了
})
export class YourComponent {
  // 将外部导入的t函数赋值给组件实例属性
  t = t;
}

方法二：封装成Angular管道（更推荐的全局复用方案） #

如果这个翻译函数是你项目里经常用到的，把它封装成Angular管道会更符合Angular的最佳实践，复用性更强：

1. 首先生成一个管道（用Angular CLI命令）：

ng generate pipe translate

2. 在生成的管道文件里实现翻译逻辑：

import { Pipe, PipeTransform } from '@angular/core';
import t from '../../translate/interface';

@Pipe({
  name: 'translate',
  standalone: true // 如果你用的是Angular 14+的独立组件
})
export class TranslatePipe implements PipeTransform {
  transform(word: string): string {
    return t(word);
  }
}

3. 在模板里通过管道语法调用：

<div>{{ 'Apple' | translate }}</div>

记得要在需要使用的组件或模块里声明/导入这个管道哦~

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