Как сделать сервис в angular 2+ доступным в javascript

Question

У меня есть следующий сценарий.

У меня есть простое угловое приложение с сервисом, которое я добавляю провайдерам в app.module. Когда я нажимаю кнопку, приложение должно загрузить файл javascript и выполнить функцию, например функцию A, определенную в этом файле javascript. Таким образом, вопрос заключается в том, как я могу получить доступ к сервису в этой функции A. Я считаю, что нужно добавить сервис в глобальную переменную окна. Есть ли лучшие способы добиться этого?

Код:

export class MyService{
    public editProjectDone = new Subject<string>();
}

app.module.ts
{
    ...providers: [MyService]
}

app.component.html
<button (click)="editProject()">Edit project</button>

app.component.ts
function editProject(){
    ... load Javascript file
    call javascript file
    js.editProject("projectId") // call function defined in javascript file
}

javascript file
{
    function editProject(projectId)
    {
        //do calculation 
        // fire event that calculation is done
        // the calcuation is not done in typescript, but here
        MyService.editProjectDone.next() 
        // The question is here how to access the event and fire it
    }
}

Answer 1

Объявите переменную как общедоступную, используя window объект, но надлежащим образом.экспортировать только некоторые функции, а не весь сервис, а каким-то стандартным способом, как показано ниже.

In Angular

export class AbcService {
  constructor() {
    const exportFunctions = {
      xyzFunction: this.xyzFunction.bind(this),
      pqrFunction: this.pqrFunction.bind(this)
    }; // must use .bind(this)
    window['ngLib']['abcService'] = exportFunctions;
  }

  xyzFunction(param1, param2) {
    // code
  }

  pqrFunction() {
    // code
  }

  private oneFunction() {
    // code
  }

  private twoFunction() {
    // code
  }
}

In Javascript

ngLib.abcService.xyzFunction(value1, value2);
ngLib.abcService.pqrFunction();

Answer 2

Во-первых, вам нужно импортировать файл js перед вызовом сервиса, и это можно сделать:

TS

let js: any = require('JSFileNAME')['default']; //Something lik this in constructer

тогда после импорта файла вам нужно создать экземпляр js в вашем Ts что-то вроде

this.newObjectOfJs = new js(); // pass any paramater if its required.

здесь и далее вы сможете получить доступ к методам и услугам из JSfile.

Answer 3

Итак, вы хотите получить доступ к угловому методу обслуживания в javascript функции A().

Например:

К вашим услугамкласс:

export class SettingsService{
    getLanguage() {
        return 'en-GB';
    }
}

Ваш файл JavaScript

function A() {
    settingsService.getLanguage();
}

---

Решение: Настраиваемое событие .

По сути, вы определяете пользовательский обработчик событий в файле javascript.И определите пользовательское событие, и dispatchEvent пользовательское событие в функции события углового щелчка.

app.component.html:

<input type="button" value='log' (click)="logclick($event)">

app.component.ts

constructor(private settings: SettingsService){}

logclick(event){
    // define custom event
    var customevent = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
            myservice: this.settings //passing SettingsService reference
        },
        bubbles: true,
        cancelable: true
      }
    );
    event.target.dispatchEvent(customevent); //dispatch custom event
}

javascript file:

// event handler function
function newMessageHandler(e) {
    console.log(
        "Event subscriber on "+e.currentTarget.nodeName+", "
        +e.detail.time.toLocaleString()+": "+e.detail.message
    );
    //calling SettingsService.getLanguage()
    console.log(e.detail.myservice.getLanguage());
}
//adding listener to custom event.
document.addEventListener("newMessage", newMessageHandler, false);

Пример вывода:

Event subscriber on #document, 9/11/2018, 11:31:36 AM: Hello World!
en-GB

Примечание: Я не добавил раздел для динамической загрузки файла JavaScript.Я предполагаю, что вы уже можете сделать это из ваших комментариев.

Answer 4

Вы должны использовать служебную переменную для доступа к функциям и переменным определенных служб.

Здесь я продемонстрирую, как вы можете это сделать.

export class AppComponent  {
  name = 'Angular';
  constructor(private myServices: MyServices){
     this.myServices.sayHello();
  }
}

Весь код доступен здесь: https://stackblitz.com/edit/angular-services-example