如何在{{}}角度使用函数

Question

当我尝试在t('Apple')中使用函数{{ }}时出现错误_co.t is not a function

然而，当我在console.log();中使用它时，

我的问题是如何在{{ }}

上使用功能

<div>{{ t('Apple') }}</div>

我从另一个文件（界面）

导入我的功能

import t from '../../translate/interface';

这是界面文件

import Translate from './translate';

function t (word: string) {
  return Translate['ar'][word];
}

export default t;

Answer 1

模板绑​​定表达式的范围是组件类的实例。 你不能引用那个范围以外的任何东西。

如果你想这样做，你可以使用

t (word: string) {
  return Translate['fr'][word];
}

@Component(...)
export MyComp {
 t2 = t; 
}

然后你可以使用

<div>{{ t2('Apple') }}</div>

或者更好的只是在组件类中移动它

@Component(...)
export MyComp {
  t (word: string) {
    return Translate['fr'][word];
  }
}

<div>{{ t('Apple') }}</div>

或者，如果您想在不同组件中重用代码，请将该功能移至注射服务中。

另见https://angular.io/tutorial/toh-pt4

Answer 2

你不应该使用{{}}中的函数，如果你想翻译它，使用管道或i18n

管道：https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1

i18n：https://angular.io/guide/i18n

Answer 3

如果没有关键字 function

，您应该具有以下功能

 t (word: string) {
  return Translate['fr'][word];
}

Answer 4

你应该在你的控制器中有一个方法（component.ts或ts-file，如果是离子的）。该函数必须返回一些东西。

以下是一个例子：

myFunction(value: any): any {
  // do something
  return value;
}

并在模板中：

<p>{{ myFunction('Hello World!') }}</p>

Here是离子的一个实例。转到pages-＆gt; home.ts