ฉันจะรวมไฟล์สคริปต์ JavaScript ใน Angular และเรียกใช้ฟังก์ชันจากสคริปต์นั้นได้อย่างไร

ฉันมีไฟล์ JavaScript เรียกว่าabc.jsที่มีฟังก์ชั่น 'สาธารณะ' xyz()ที่เรียกว่า ฉันต้องการเรียกใช้ฟังก์ชันนั้นในโครงการเชิงมุมของฉัน ฉันจะทำอย่างไร?

อ้างถึงสคริปต์ภายในไฟล์angular-cli.json( angular.jsonเมื่อใช้ angular 6+)

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

จากนั้นเพิ่มtypings.d.ts(สร้างไฟล์นี้srcหากยังไม่มีอยู่)

declare var variableName:any;

นำเข้าในไฟล์ของคุณเป็นไฟล์

import * as variable from 'variableName';

ในการรวมไลบรารีส่วนกลางเช่นjquery.jsไฟล์ในอาร์เรย์สคริปต์จากangular-cli.json( angular.jsonเมื่อใช้เชิงมุม 6+):

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

หลังจากนี้ให้รีสตาร์ท ng ให้บริการหากเริ่มต้นแล้ว

เพิ่มไฟล์ js ภายนอกindex.html

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

นี่คือไฟล์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||{})

จากนั้นประกาศว่าอยู่ในส่วนประกอบดังต่อไปนี้

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>

มันทำงานให้ฉัน ...

คุณสามารถทำได้

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

หรือ

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