如何将服务/组件属性发送到 Angular 中的 vanilla JS 文件？

Question

In an Angular project, I've got a third party library I'm trying out, but it needs some tweaks to work how I want it to. In one of the library's JS files, I need the ability to dynamically construct a URL using a property received from my Angular service (or, perhaps from a component).

Is there any way I can import an Angular service's property into a vanilla JS file and use it?

Answer 1

I will try answering given the information you provided

If you can, I would advise having the external JS file as a dependency of your angular's service and not the opposite.

But this is not what you are asking and if you cannot, injecting an angular service into an external JS is quite cumbersome because you need the whole injection context to do so.

In your situation, if the library you want to use is kind of monolithic or hard to use as a dependency and if you can change some code into it, then you could possibly rely on a mediator .

A mediator is a class known to anyone, and anyone can use it to send to or get information from. In your case, you could have a plain JS mediator so that you can import it from your plain JS file too.

But normally you do have your angular SPA and unless you do have events coming from your library, you should have the hand on who triggers what and when. So in the case of an event, I do not see any problem of sending your property's data to your library.

In the case where your library emits events by its own, either watch for those events within angular, build your url and send the data back to the library (be careful to use an ngZone in that case)

If your library must handle events on its own and there is no way to have the hand on it, perhaps you should just pass a callback to get the data you need to provide to this library, that callback will provide the mandatory data on time to the lib. (I've no detail of the library and therefore cannot help much). Here is how it could work:

import MyLib from './myLib.js' 

@Injectable({ providedIn: 'root' })
export class MyService {

private myLib: MyLib;

constructor(){
   this.myLib = new MyLib();
   this.myLib.onTask(()=>this.getUrl())
}

private getUrl(): string {
return "www.urlFromAService.com"
}
}

And if you really do not have any callback, you could store a callback on the object's instance

this.myLib.getUrl = ()=>this.getUrl();

so that within your js code, your instance will have a getUrl function using the service's method (and context), while this is possible, it is hackish, and I would only advise you to do this for a POC.