如何在Angular 5中公开一个js函数

Question

I'm using Angular 5 to develop my application.
In assets/js folder, I have a js file test.js . I have a variable data and a function Loaddata() in this js file. I want to be able to access these in my app.component.ts.

I was able to make the variable scope public and was able to access it in component.ts, but I failed to do the same with the function.

This is the process I followed for the variable:
1. Add reference of js file in angular-cli.json

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

2. Added the variable name in typings.d.ts file.

       declare var data:any;

Now I was able to access this variable in app.component.ts.
I want to be able to access even the function in the similar manner.
Can anyone explain me how to do it.

Answer 1

This seems like an awesome use case for using an Injectable Service. Create a loadData.service.ts file in the src/app directory of your application(if you are using Angular CLI), and then format it like this.

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

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

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

Then, whenever you need to use that function in a component, just import the service into your component, create a local instance of it in your constructor, and then use it! To access the data, just set it equal to another variable in that components constructor.

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

Best of luck!

Answer 2

Take a look at: https://nodejs.org/api/modules.html

You could just use exports to do what you are asking for.

foo.js

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

EDIT ---- Fixed syntax

bar.js

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