javascript - 如何在 Angular 5 中公开 js 函数

Question

我正在使用 Angular 5 来开发我的应用程序。
在assets/js文件夹中，我有一个js文件test.js。我在这个 js 文件中有一个变量 data 和一个函数 Loaddata() 。我希望能够在我的 app.component.ts 中访问这些。

我能够将变量作用域公开并能够在 component.ts 中访问它，但我无法对该函数执行相同的操作。

这是我对变量遵循的过程:
1.在angular-cli.json

中添加js文件的引用

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

2.在typings.d.ts文件中添加了变量名称。

       declare var data:any;

现在我可以在 app.component.ts 中访问这个变量了。
我希望能够以类似的方式访问该功能。
谁能解释一下我该怎么做。

Answer 1

这似乎是使用可注入(inject)服务的一个很棒的用例。在应用程序的 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);
    }
}

祝你好运!