如何在Angular 5中公開一個js函數

Question

我正在使用Angular 5開發我的應用程序。
在assets / js文件夾中，我有一個js文件test.js 我在這個js文件中有一個變量data和一個函數Loaddata() 。 我希望能夠在我的app.component.ts中訪問它們。

我能夠將變量作用域設為公用，並能夠在component.ts中對其進行訪問，但是我無法對該函數執行相同的操作。

這是我對變量執行的過程：
1.在angular-cli.json添加js文件angular-cli.json

        "scripts": [
                "assets/js/test.js"
         ]

2.在types.d.ts文件中添加了變量名稱。

       declare var data:any;

現在，我可以在app.component.ts中訪問此變量。
我希望能夠以類似的方式訪問該功能。
誰能解釋我該怎么做。

Answer 1

這似乎是使用可注入服務的絕佳用例。 在應用程序的src / app目錄中創建loadData.service.ts文件（如果使用的是Angular CLI），然后像這樣格式化它。

import { Injectable } from '@angular/core';

@Injectable()
export class LoadDataService {
    data = [
        // Your Data Here
    ]
    constructor() {};

    loadData(params?) {
        // your code here
    }
}

然后，每當需要在組件中使用該功能時，只需將服務導入到組件中，在構造函數中創建它的本地實例，然后使用它即可！ 要訪問數據，只需將其設置為等於該組件構造函數中的另一個變量即可。

import { LoadDataService } from '../loadData.service';

@Component({
    //whatever
})

export class YourComponent {
    dataFromService: [];
    constructor(private loadDataService: LoadDataService) {
        this.dataFromService = this.loadDataService.data;
    }

    runThisToGetData() {
        this.loadDataService.loadData(yourParams).subscribe(r => r);
    }
}

祝你好運！

Answer 2

看看： https : //nodejs.org/api/modules.html

您可以只使用導出來完成您所要求的。

foo.js

module.exports = {
  hello: () => alert('hello from foo!')
};

編輯----固定語法

bar.js

const foo = require('./foo.js');
foo.hello();