Làm cách nào để đưa tệp script JavaScript vào Angular và gọi một hàm từ script đó?

Tôi có một tệp JavaScript được gọi là abc.jscó chức năng 'công khai' được gọi xyz(). Tôi muốn gọi hàm đó trong dự án Angular của mình. Làm thế nào để làm điều đó?

Tham khảo các tập lệnh bên trong tệp angular-cli.json( angular.jsonkhi sử dụng góc 6+).

"scripts": [
    "../path" 
 ];

sau đó thêm vào typings.d.ts(tạo tệp này trong srcnếu nó chưa tồn tại)

declare var variableName:any;

Nhập nó vào tệp của bạn dưới dạng

import * as variable from 'variableName';

Để bao gồm một thư viện toàn cục, ví dụ: jquery.jstệp trong mảng tập lệnh từ angular-cli.json( angular.jsonkhi sử dụng góc 6+):

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

Sau đó, khởi động lại phục vụ nếu nó đã được bắt đầu.

Thêm tệp js bên ngoài vào index.html .

<script src="./assets/vendors/myjs.js"></script>

Đây là tệp myjs.js :

var myExtObject = (function() {

    return {
      func1: function() {
        alert('function 1 called');
      },
      func2: function() {
        alert('function 2 called');
      }
    }

})(myExtObject||{})


var webGlObject = (function() { 
    return { 
      init: function() { 
        alert('webGlObject initialized');
      } 
    } 
})(webGlObject||{})

Sau đó khai báo nó trong thành phần như dưới đây

demo.component.ts

declare var myExtObject: any;
declare var webGlObject: any;

constructor(){
    webGlObject.init();
}

callFunction1() {
    myExtObject.func1();
}

callFunction2() {
    myExtObject.func2();
}

demo.component.html

<div>
    <p>click below buttons for function call</p>
    <button (click)="callFunction1()">Call Function 1</button>
    <button (click)="callFunction2()">Call Function 2</button>
</div>

Nó làm việc cho tôi ...

Bạn có thể

import * as abc from './abc';
abc.xyz();

hoặc là

import { xyz } from './abc';
xyz()