Wie kann ich eine Variable aus einem anderen Skript aufrufen, um eine Funktion auszuführen

Question

Hallo Ich habe ein Skript mit dem Namen 'script.js' Das Problem ist, dass ich dort viele Funktionen habe, und ich muss diese Funktion am Anfang ausführen eckig.

var appMaster = { 

    preLoader: function(){ 

    }, 
    smoothScroll: function() { 

    } 
} 

aber ich brauche diese Variable appMaster

import '../../assets/js/script.js'; 
@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class HomeComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    appMaster.preLoader(); 
    appMaster.smoothScroll(); 
    } 
} 

Der Fehler zu nennen, ist appMaster keine nicht deklarierten Variablen. Wie kann ich die Funktionen innerhalb dieses anderen Skripts ausführen?

Answer 1

Versuchen Sie wie folgt:

JavaScript-Datei als common.js innerhalb der folgenden Position in Ihrem Projekt Vermögen namens Erstellen => js => script.js

common.js

var comman = (function() { 
    return { 
     masonryBuild: function() { 
      console.log('preLoader'); 
     } 
    } 
})(comman || {}) 

offen .angular-cli. json Datei dann externe hinzufügen Javascript-Datei Pfad wie unten

"scripts": [ 
    "../src/assets/js/comman.js" 
] 

declare Skript var name in Ihrem Typoskript wie:

component.ts

declare var comman: any; 

export class Component { 
    ngOnInit() { 
     comman.masonryBuild(); 
    } 
} 

Answer 2

Sie müssen die Variable appMaster aus Ihrer Skriptdatei exportieren, wenn Sie sie an anderer Stelle verwenden möchten.

export let appMaster = { 
 

 
    preLoader: function(){ 
 

 
    }, 
 
    smoothScroll: function() { 
 

 
    } 
 
}; 
 

 

 

 
import {appMaster} from '../../assets/js/script.js'; 
 
@Component({ 
 
    selector: 'app-home', 
 
    templateUrl: './home.component.html', 
 
    styleUrls: ['./home.component.css'], 
 
    encapsulation: ViewEncapsulation.None 
 
}) 
 
export class HomeComponent implements OnInit { 
 

 
    constructor() { } 
 

 
    ngOnInit() { 
 
    appMaster.preLoader(); 
 
    appMaster.smoothScroll(); 
 
    } 
 
}

Answer 3

Hoffentlich werden Sie Export/Import-Anweisung verwenden.

Wenn ja, dann Sie script.js ändern und export

var appMaster = { 
    preLoader: function(){}, 
    smoothScroll: function() {} 
} 
export default appMaster; 

in der Komponentendatei Verwendung import

import anyName from "./path/to/file"; 

Anruf jede Funktion von script.js verwenden, expample

anyName.preLoader() 

Answer 4

You can call varibale from anthoer script in Angular application. 

Step 1. Create demo.js file in assests/javascript folder. 

export function test1(){ 
    console.log('Calling test 1 function'); 
} 

Step 2. Create demo.d.ts file in assests/javascript folder. 

export declare function test1(); 

Step 3. Use it in your component 
//User defined file path 
import { test1 } from '../assets/javascript/demo'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    constructor() { 
    console.log(test1()); 
    } 
} 


Note: js and .d.ts file name shoule be same