Как вызвать функции JavaScript из Typcript в Angular 5?

Я работаю над разработкой PDF Viewer в Angular 5. Я закончил писать HTML-код для части пользовательского интерфейса. Теперь у меня есть файлы JavaScript, которые предоставляют функциональность для элементов пользовательского интерфейса. Поскольку Angular 5 поддерживает машинописные тексты для реализации функциональных возможностей компонентов пользовательского интерфейса, я хочу включить файлы JavaScript в Angular Project и вызвать их из моего кода машинописного текста.

Вопросы:

  1. Как и где включить файлы JavaScript в Angular Project?
  2. Как вызвать функции JavaScript из класса TypScript?

Было бы здорово, если бы кто-нибудь предоставил мне пример!

Заранее спасибо!!

Ответы

Ответ 1

1. Как и где включить файлы JavaScript в Угловой проект?

Вам нужно включить свой JS- файл в папку с ресурсами и передать этот JS файл в файл .angular-cli.json.

См. Снимок,

Структура папки должна быть такой.

enter image description here

.angular-cli.json

enter image description here

2. Как вызвать функции JavaScript из класса TypScript?

ваш TS должен быть таким.

myJsFile.js.

enter image description here

Эта примерная логика, упомянутая выше, будет работать, я пробовал и тестировал с использованием версии 4, поэтому я ожидаю, что она также будет работать с версией 5.

Ответ 2

выдает ошибку, говоря, что myMethod не определен

ОШИБКА ReferenceError: myMethod не определен в угловых 6

Ответ 3

Данный ответ аруна Радж Р идеален.

Но для angular 6+ проекта вам нужно взять angular.json вместо angular-cli.json.

Кроме того, если вы хотите передать параметр во внешнюю функцию из файла js, используйте только function name.

Например:

app.component.ts 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var myfunction: any; // just change here from arun answer.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
    constructor() { }

    ngOnInit() { 
        myfunction('test1', 'test2');
    }
};

файл yourJs:

function myfunction(params1, params2) {
    console.log('param1', params1);
    console.log('param2', params2);
}