如何从另一个脚本调用变量来执行函数答案

【问题标题】：How can I call a variable from another script to execute a function如何从另一个脚本调用变量来执行函数
【发布时间】：2017-11-09 05:22:27
【问题描述】：

您好，我有一个名为“script.js”的脚本，问题是我有很多函数，我需要在 angular 的开头执行这个函数。

var appMaster = {

    preLoader: function(){

    }, 
    smoothScroll: function() {

    }
}

但我需要调用这个变量 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();
  }
}

错误是appMaster没有未声明的变量。如何在其他脚本中执行函数？

【问题讨论】：

你能检查我的答案吗？它将起作用，希望这对您有用。

标签： javascript angular angular5

【解决方案1】：

试试这样：

在项目资产的以下位置创建名为 common.js 的 javascript 文件 => js => script.js

common.js

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

打开 .angular-cli.json 文件，然后添加外部 javascript 文件路径，如下所示

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

在您的打字稿中声明脚本变量名称，例如：

component.ts

declare var comman: any;

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

【讨论】：

【解决方案2】：

如果您想在其他地方使用它，您需要从脚本文件中导出 appMaster 变量。

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();
  }
}

【讨论】：

src/app/home/home.component.ts(2,23) 中的错误：错误 TS6143：模块 'path/js/script.js' 已解决为 'path/js/script.js '，但没有设置'--allowJs'。

【解决方案3】：

希望您喜欢使用导出/导入语句。

如果是这样，请更改您的 script.js 并使用 export

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

在组件文件中使用import

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

从 script.js 调用任何函数，例如

anyName.preLoader()

【讨论】：

src/app/home/home.component.ts(2,23) 中的错误：错误 TS6143：模块 'path/js/script.js' 已解决为 'path/js/script.js '，但没有设置'--allowJs'。
似乎正在尝试导入 js 文件 .ts 文件。请查看此链接github.com/Microsoft/TypeScript/issues/15970

【解决方案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

【讨论】：