En un proyecto de Angular, tengo una biblioteca de terceros que estoy probando, pero necesita algunos ajustes para que funcione como yo quiero. En uno de los archivos JS de la biblioteca, necesito la capacidad de construir dinámicamente una URL usando una propiedad recibida de mi servicio Angular (o, quizás, de un componente).
¿Hay alguna forma de importar la propiedad de un servicio Angular en un archivo JS de vainilla y usarlo?
Trataré de responder dada la información que proporcionaste.
Si puede, le recomendaría tener el archivo JS externo como una dependencia del servicio de su angular y no al revés.
Pero esto no es lo que está preguntando y, si no puede, inyectar un servicio angular en un JS externo es bastante engorroso porque necesita todo el contexto de inyección para hacerlo.
En su situación, si la biblioteca que desea usar es un poco monolítica o difícil de usar como dependencia y si puede cambiarle algún código, entonces posiblemente podría confiar en un mediador .
Un mediador es una clase conocida por cualquiera, y cualquiera puede usarla para enviar u obtener información. En su caso, podría tener un mediador JS simple para que también pueda importarlo desde su archivo JS simple.
Pero normalmente tiene su SPA angular y, a menos que tenga eventos provenientes de su biblioteca, debe tener la mano sobre quién activa qué y cuándo. Entonces, en el caso de un evento, no veo ningún problema en enviar los datos de su propiedad a su biblioteca.
En el caso de que su biblioteca emita eventos por sí misma, observe esos eventos dentro de angular, cree su URL y envíe los datos a la biblioteca (tenga cuidado de usar una ngZone en ese caso)
Si su biblioteca debe manejar eventos por su cuenta y no hay forma de controlarla, tal vez debería simplemente pasar una devolución de llamada para obtener los datos que necesita proporcionar a esta biblioteca, esa devolución de llamada proporcionará los datos obligatorios a tiempo para la lib. (No tengo detalles de la biblioteca y por lo tanto no puedo ayudar mucho). Así es como podría funcionar:
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" } }Y si realmente no tiene ninguna devolución de llamada, puede almacenar una devolución de llamada en la instancia del objeto
this.myLib.getUrl = ()=>this.getUrl(); de modo que dentro de su código js, su instancia tendrá una función getUrl usando el método (y el contexto) del servicio, mientras que esto es posible, es hackish, y solo le recomendaría que haga esto para un POC.