Как использовать методы из внешнего JS в Angular - PullRequest
0 голосов
/ 20 сентября 2018

Мне нужно вызвать функцию из внешнего файла js в мой угловой компонент

Я уже перехожу к соответствующему вопросу

My External JS (external.js)

var radius = 25;

function calculateRadius(pi) {
    let piValue = 3.14159;

    if(pi) {
        piValue = pi;
    }

    var result = piValue * radius * radius;
    console.log('Result: ', result);
}

function wrapperMethod(pi) {
    console.log('Hi, this is from wrapper method');
    calculateRadius(pi)
}

Я добавил указанный JS-файл в angular.json под блоком сценариев

"scripts": [
    "src/assets/external.js",
]

В CircleComponent я хотел бы вызвать метод

import wrapperMethod from '../../src/assets/external.js';

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

    ngOnInit() {
        wrapperMethod(3.14159);
    }
}

Но не удалось вызвать метод.Пожалуйста, помогите мне, как этого добиться.

Примечание: Указанные методы в качестве примера методов, я хочу реализовать эту логику с помощью файла сложного кода.Этот вопрос рассказывает о typings.d.ts, но я не знаю, где находится typings.d.ts в моем проекте Angular.Пожалуйста, проинформируйте меня об этом.Если указанный вопрос дает хорошее решение, значит, я должен опубликовать этот вопрос.

Угловая структура (Создано с использованием Angular CLI)

enter image description here

Я не знаю, где находится typings.d.ts, может кто-нибудь сказать мне, где находится typings.d.ts - что упоминается в упомянутых вопросах Как включить внешний js-файл в Angular 4 и вызвать функцию из angular вJS

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

поместите ваш внешний файл .js под сценарии в сборке

like that

, если все еще не видите внутри него методы, вставленные в index.html

<script src="assets/PATH_TO_YOUR_JS_FILE"></script>

в вашем компоненте после раздела импорта

declare var FUNCTION_NAME: any;

ANY_FUNCTION() {
    FUNCTION_NAME(params);
}
0 голосов
/ 20 сентября 2018

Не путайте с typings.d.ts.Выполните следующие шаги.

1.Добавьте внешний файл в папку assets.Содержимое этого файла будет по умолчанию включено в соответствии с вашим angular-cli.json.

2.Функция вашего js, которую вы собираетесь использовать, должна быть exported.то есть

export function hello() {
    console.log('hi');
}

3. Импортируйте ваш файл в ваш компонент, как показано ниже.

 import * as ext from '../assets/some-external.js';

4. Теперь вы можете ссылаться на него как

ext.hello();
0 голосов
/ 20 сентября 2018

Вы можете выполнить следующие шаги

1) First add a reference of your external JS file for importing it to the component. 
   import * as wrapperMethods from '../../src/assets/external.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var wrapperMethods: any;

3) ngOninit(){
    wrapperMethods();
   }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...