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

【问题标题】：How to use javascript functions in an Angular 2 component from a different file如何在来自不同文件的 Angular 2 组件中使用 javascript 函数
【发布时间】：2018-05-03 19:29:25
【问题描述】：

我有一个 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);
  }

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

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

【问题讨论】：

标签： typescript angular

【解决方案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';

【讨论】：

1- 我必须使用 javascript（无法将其转换为 typescript）文件，因为它在不同项目之间共享
2- 如果我使用 webpack 呢？
好的。有道理...我认为您可以使用 Webpack 直接要求该文件。类似var lib = require('./path/to/lib');
我通过const lib = require('my/file/path') 导入它，然后从我称为lib.example(input) 的组件内部导入它，所以现在它实际上正在读取文件，但我收到此错误Uncaught ReferenceError: example is not defined 并且角度应用程序没有运行
如果使用console.log(lib)，js控制台打印什么？

【解决方案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' }
        });
      }
    );
  }

希望对你有帮助

【讨论】：

适用于this module（它不是唯一一个名为html2pdf的）

【解决方案3】：

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

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

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

declare function example(input): void;

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

你是怎么做到的？
请说明您找到的解决方案的步骤。
问题与 TypeScript 而不是 Angular2 有关。在 typeScript 中，您不能简单地使用任何 JS 文件，而没有定义（键入）文件来声明变量的类型、函数的参数以及返回值。检查此链接以了解如何创建一个。 peter.grman.at/how-to-write-typescript-definition-files