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

1

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

У меня есть простое угловое приложение с сервисом, которое я добавляю к провайдерам в 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
    }
}
  • 0
    Не прояснилось про файл Javascript ???? Ты имеешь ввиду машинопись ???
  • 0
    Привет Радж, ты можешь загрузить внешний файл javascript в приложение angular 2 и выполнить определенную в нем функцию.
Показать ещё 4 комментария
Теги:
angular

4 ответа

3
Лучший ответ

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

Например:

Ваш класс обслуживания:

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

Ваш javascript файл

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

Решение: Пользовательское событие.

В основном вы определяете настраиваемый обработчик событий в файле javascript. Определите Custom Event и 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 файл:

// 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. Я предполагаю, что вы уже можете сделать это из своих комментариев.

Поделиться
  • 0
    Привет. Ваш ответ кажется правильным для этого случая. У меня есть другой сценарий, когда я загружаю внешний HTML-файл и отображаю его, установив innerHtml. В этом внешнем html есть кнопка. Когда я нажимаю на кнопку, вызывается функция JavaScript. В этой функции я хочу получить доступ к службе углового приложения. Как это может быть достигнуто в этом случае? Если вопрос не понятен. Я создам еще один вопрос с кодом.
  • 0
    AngularChan, как сказал j4rey, согласен, что лучшим решением для этого являются пользовательские события, а не глобальные переменные. для этого сценария вы также можете отправить пользовательское событие из функции btn click, которую ваша угловая служба прослушивает в этом событии, когда ваш слушатель в угловой службе получит это событие, создайте другое настраиваемое событие, например, @ j4rey, а остальные будут похожи на j4rey. код. надеюсь, это поможет.
Показать ещё 2 комментария
1

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

В Угловом

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

В Javascript

ngLib.abcService.xyzFunction(value1, value2);
ngLib.abcService.pqrFunction();
Поделиться
0

Во-первых, вам нужно импортировать файл 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.

Поделиться
  • 0
    Привет, я хочу добиться обратного. Позвоните в сервис приложения angular 2 из функции javascript.
  • 0
    нужно понимать ваш код и структуру проекта. любой код будет полезен.
Показать ещё 1 комментарий
0

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

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню