时间戳

首页 > 解决方案 > 在 Angular HTML 中使用导入的 Typescript 函数

html - 在 Angular HTML 中使用导入的 Typescript 函数

问题描述

我有一个 TypeScript 实用程序类myUtils.ts，如下所示：

export class MyUtils {
  static doSomething(input: string) {
    // do something
  }
}

我想在我的组件的 HTML 中调用这个方法。为了做到这一点，我在我的组件中导入了这个类

import { MyUtils } from './utils'

并像这样在组件的 HTML 中使用：

<ng-template #dynamicTableCell let-entry>  
  {{ MyUtils.doSomething(entry) }}
</ng-template>

HTML 抱怨Unresolved variable or type MyUtils. 有趣的是，我能够在组件文件MyUtils.doSomething(someEntry)中没有任何错误的情况下做同样的事情。component.ts它只是抱怨的HTML。

有人可以告诉我如何在 HTML 中解决这个问题吗？提前致谢。

标签： htmlangulartypescriptcomponents

解决方案

您不能使用它，因为模板表达式仅限于引用组件实例的成员，您需要在组件中创建该方法，或者在您的情况下使用 Angular 管道。

组件.ts

import { MyUtils } from './utils';
...

doSomething(entry) {
  MyUtils.doSomething(entry);
}



// or

doSomething = MyUtils.doSomething;

You can have a look at Template expressions doc.

推荐阅读