Как использовать функции javascript в компоненте Angular 2 из другого файла

У меня есть файл javascript, который содержит некоторые функции манипуляции данными (вообще не манипулирует DOM), например округление поплавка, математические операции и т.д.

Мой js файл с именем myexample.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);
  }

Я искал довольно долгое время и пробовал несколько вещей, но, к сожалению, вообще не повезло.

Я был бы очень благодарен, если кто-то может помочь.

Ответы

Ответ 1

Наконец-то я узнал ответ; он должен был в основном создать файл с типизированием и добавить его в проект

Ответ 2

Вы можете экспортировать функции в TypeScript:

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

и использовать его таким образом (при условии, что ваше имя файла - lib.ts):

import {example} from './lib';

example();

Если вы хотите использовать файл CommonJS, вам необходимо настроить SystemJS в атрибуте map:

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

Вы можете импортировать свой модуль таким же образом:

import {example} from './lib';

Ответ 3

Другой способ - добавить функции js, определенные в отдельном файле, в глобальную область. Итак, в вашем js файле вы можете добавить sth следующим образом:

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

Затем в вашем файле typeScript, прямо под импортом, вы можете объявить эту функцию:

declare function example(input): void;

И тогда вы можете просто использовать эту функцию в методах компонентов.

Ответ 4

это то, для чего он работал у меня Я пытался использовать html2pdf из приложения Angular2, поэтому мне пришлось сделать ссылку на эту функцию

var html2pdf = (function(html2canvas, jsPDF) {

объявлен в html2pdf.js.

Итак, я добавил сразу после деклараций импорта в моем angular -controller это объявление:

declare function html2pdf(html2canvas, jsPDF): any;

то из метода моего контроллера angular я вызываю эту функцию:

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' }
        });
      }
    );
  }

Надеюсь, что это поможет