typescript - 如何在来自不同文件的 Angular 2 组件中使用 javascript 函数

Question

我有一个 javascript 文件，其中包含一些数据操作函数(根本没有 DOM 操作)，例如浮点舍入、数学运算等

我的名为 myexample.js 的 js 文件看起来像这样

function example(input) {
  return input * 2
}
module.exports = { example: example }

然后我有我的 Angular 组件 example.component.ts

例如:

import { Component, EventEmitter} from '@angular/core';
@Component({
  selector: 'input-number',
  template: `<input 
              type='text' 
              [(value)]='value' 
              (blur)='runExample()' 
             />`,
  inputs: ['value'],
  outputs: ['valueChange']
})
export class Example {
  value: string;
  valueChange = new EventEmitter;

  runExample() {
    let val = parseFloat(this.value);
    // here i need to call example(input) from myexample.js
    // and assign the return to val
    this.valueChange.emit(val);
  }

我已经搜索了很长一段时间并尝试了多种方法，但不幸的是，我一点运气都没有。

如果有人能提供帮助，我将不胜感激。

Answer 1

您可以在 TypeScript 中导出函数:

export function example(input) {
  return input * 2;
}

并以这种方式使用它(假设您的文件名为 lib.ts):

import {example} from './lib';

example();

如果要使用CommonJS文件，需要在map属性中配置SystemJS:

System.config({
  (...)
  map: {
    lib: 'path/to/lib/js'
  }
});

你可以用同样的方式导入你的模块:

import {example} from './lib';