Question

这里是Angular / Typescript newb的位。

我已经建立了一个导出的帮助函数的JavaScript库，我想将其导入到Angular组件中，并在这些组件的.html模板文件中使用。

这是我的Javascript库，template-functions / data-types.ts：

export const isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;

这是我要导出的简单箭头功能：

这是我将其导入到组件中的方式：

import { Component, OnInit, Input } from '@angular/core';
import { MyModel } from '../model/my-model';
import { isNumeric } from '../template-functions/data-types';

@Component({
  selector: 'my-module',
  templateUrl: './my-module.html'
})

export class MyModule implements OnInit {

  @Input() public mymodeldetails: MyModel;

  constructor() { }

  ngOnInit() { }

  // isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;
}

这是在使Angular编译器和VSCode告诉我即使路径正确的情况下也找不到数据类型模块几个小时之后。我有.js文件扩展名，而不是.ts文件扩展名！

因此，现在Angular可以看到我的isNumeric函数，但是到目前为止，.html模板文件看不到它。浏览器将引发错误“ _co.isNumeric不是函数”。

我还需要做些什么才能使Angular模板看到导入的功能？

我正在使用Angular 6。

Answer 1

要使其在模板中可见，请将其包装在组件方法中：

import { isNumeric } from '../template-functions/data-types';

export class MyComponent implements OnInit {

  isNumeric(val: any): boolean {
    return isNumeric(val);
  }
}

有关演示，请参见this stackblitz。

如Angular模板语法documentation中所述：

表达式上下文通常是 component 实例。（...）模板表达式不能引用全局名称空间中的任何内容（undefined除外）。他们不能引用window或document。他们不能致电console.log或Math.max。它们仅限于引用表达式上下文的成员。

将通用JS函数导入Angular模块

1 个答案: