Question

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

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

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

然后我的角度组件 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';

Answer 2

这对我有用我试图使用Angular2应用程序中的html2pdf，所以我不得不引用这个函数

var html2pdf = (function(html2canvas, jsPDF) {

在html2pdf.js中声明。

所以我在我的角度控制器中的导入声明之后添加了这个声明：

declare function html2pdf(html2canvas, jsPDF): any;

然后，从我的角度控制器的方法我调用这个函数：

generate_pdf(){
    this.someService.loadContent().subscribe(
      pdfContent => {
        html2pdf(pdfContent, {
          margin:       1,
          filename:     'myfile.pdf',
          image:        { type: 'jpeg', quality: 0.98 },
          html2canvas:  { dpi: 192, letterRendering: true },
          jsPDF:        { unit: 'in', format: 'A4', orientation: 'portrait' }
        });
      }
    );
  }

希望有所帮助

Answer 3

另一种方法是将在单独文件中定义的js函数添加到全局范围。所以在你的js文件中你可以像这样添加：

$(document).ready(function() {
    window.example = example;
}

然后在组件typeScript文件中，在导入的正下方，您可以声明此函数：

declare function example(input): void;

然后你可以在组件方法中简单地使用这个函数。

Answer 4

我终于找到了答案;它基本上是一个打字文件并将其添加到项目中。

问题与TypeScript而非Angular2有关。在typeScript中，你不能简单地使用任何JS文件，而没有一个定义（输入）文件来声明变量的类型，函数的参数以及返回。检查this link以了解如何创建一个。

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

4 个答案: