Bagaimana cara menyertakan file skrip JavaScript di Angular dan memanggil fungsi dari skrip itu?

119

Saya memiliki file JavaScript bernama abc.jsyang memiliki fungsi 'publik' yang disebut xyz(). Saya ingin memanggil fungsi itu dalam proyek Angular saya. Bagaimana aku melakukan itu?

javascript angular Piyush Jain
sumber

Jawaban:

105

Lihat skrip di dalam file angular-cli.json( angular.jsonsaat menggunakan angular 6+).

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

lalu tambahkan typings.d.ts(buat file ini srcjika belum ada)

declare var variableName:any;

Impor di file Anda sebagai 

import * as variable from 'variableName';
Aravind
sumber
9
saya menambahkan jalur dalam skrip sebagai "scripts": ["./assets/common_header_sidebar.js"]; lalu di mengetik.d.ts saya menulis mendeklarasikan var commonHeader: any; dan kemudian di file ts saya, saya menulis import * as commonHeaderModule dari 'commonHeader'; tetapi mendapatkan "Tidak dapat menemukan modul 'commonHeader'." error
Piyush Jain
6
saya mungkin terdengar konyol untuk menanyakan ini. tetapi bagaimana nama file di jalur (dideklarasikan di angular-cli.json) dan menyatakan nama objek di file mengetik.d.ts terkait. karena saya mengimpor dari nama objek yang dideklarasikan, bukan file
Piyush Jain
2
dapatkah Anda membuat plunkeruntuk mereproduksi
Aravind
2
selesai dengan integrasi itu hanya saja saya harus mendeklarasikan fungsi di file ts saya di mana saya menggunakannya dan impor tidak diperlukan. Terima kasih banyak .
Piyush Jain
2
@Aravind bagaimana jika saya tidak memiliki file mengetik.d.ts di proyek Angular 4 saya?
Habib
33

Untuk memasukkan pustaka global, misalnya jquery.jsfile dalam larik skrip dari angular-cli.json( angular.jsonsaat menggunakan sudut 6+):

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

Setelah ini, mulai ulang servis jika sudah dimulai.

Rahul Singh
sumber
3
bagaimana Anda mengimpor pada file skrip ketikan?
alansiqueira27
1
untuk mengimpor dalam penggunaan file ts -declare var $: any;
ojus kulkarni
3
File angular-cli.json telah diganti namanya / diganti dengan angular.json di Angular versi 6+.
Ε Г И І И О
22

Tambahkan file js eksternal di index.html .

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

Ini file 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||{})

Kemudian nyatakan dalam komponen seperti di bawah ini

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>

Ini bekerja untuk saya ...

Nagnath Mungade
sumber
Terima kasih contoh yang sangat menyeluruh, itu berhasil untuk saya pada sudut 6. Tidak ada jawaban lain yang berhasil.
Daniel Filipe
Fwiw, berikut adalah beberapa penjelasan tentang apa yang declaredilakukannya - pada dasarnya " declaredigunakan untuk memberitahu naskah bahwa variabel tersebut telah dibuat di tempat lain " (dari jawaban ini ).
ruffin
18

Anda juga bisa

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

atau

import { xyz } from './abc';
xyz()
jatuh
sumber
26
apa yang harus saya lakukan ketika file di-host di suatu tempat tetapi tidak di repo lokal?
Piyush Jain
apakah kamu tahu ini?
Luis Aceituno
Mendapatkan kesalahan di kedua metode. Saya memiliki file .js dalam proyek saya tetapi ketika saya mengimpor dengan metode pertama itu memberi saya kesalahan dalam kompilasi dan tidak dapat menemukan modul apa pun ketika saya menggunakan metode kedua. Dan saya hanya menggunakan slider licin.
Habib