Как поговорить со службой извне в Angular 2+? - PullRequest
Новая
       146

Как поговорить со службой извне в Angular 2+?

0 голосов
/ 07 августа 2020

Во многих примерах службы angular вызывали функции, определенные вне angular.

Как мне вызвать службу Angular из внешней функции? 

@Injectable({providedIn: 'root'})
export class SearchService {
    search(string) {
        ......
    }

    constructor(private http: HttpClient, ...){}
}

// outside function
function searchForContent(string) {
    // need to get the service here
    return service.search(string);
}

РЕДАКТИРОВАТЬ:

Я ищу способ, который гарантирует, что использование этой услуги через DI также будет доставлять из синглтона

1 Ответ

1 голос
/ 07 августа 2020

Это считается анти-шаблоном для Angular приложений . Однако, если вы указали c цели для этого и действительно должны это сделать, вот как вы сможете использовать свою службу за пределами angular:

Допустим, у нас есть эта услуга: 

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

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

  constructor() { }

  testMethod() {
    alert("Hello World!");
  }
}

Теперь вы можете сделать это в своем компоненте приложения или даже в файле main.ts. Вы можете выбрать, где разместить следующий код ниже, в зависимости от того, когда вы хотите предоставить свою службу глобально. Но предположим, что вы хотите открыть службу при вызове компонента приложения:

В верхней части app.component.ts 

declare var window: any;

window.tryTestService = function tryTestService() {
  let myTestService = new TestService();
  myTestService.testMethod();
}

// Now you can use this anywhere. (You can even drop the 'window' as it is global)
window.tryTestService();

Вот и все. По сути, вы просто создаете экземпляр своей службы и добавляете ее в глобальный объект «окно». Теперь вы можете позвонить куда угодно:

введите описание изображения здесь

Вы также можете просто добавить экземпляр своей службы к объекту окна, выполнив следующие действия: 

declare var window: any;

window.TestServiceInstance = new TestService();
window.TestServiceInstance.testMethod(); // Call the methods of your service.

Примечание:

Этот пример достаточно прост, поскольку у нас мало работы с нашим сервисом, и у нас нет никаких других зависимостей в нашем TestService. Однако все начинает усложняться, когда у вас есть другие зависимости от вашей службы, поскольку вам придется их внедрить или создать их экземпляры, чтобы полностью построить свою службу. Angular делает всю эту тяжелую работу за вас с помощью своей мощной системы внедрения зависимостей, при условии, что вы делаете это «способом Angular» или внутри контекста Angular.

...