Как правильно внедрить сервис в приложение Angular?

Question

В прошлом году, когда я работал над созданием навыка Alexa, я обычно определял сервис:

service.ts

var createReport = function(variable,callback){
  //Method code here
        };
module.exports.createReport = createReport;

И этоЯ использовал его для вызова в:

app.ts

const service= require('../service.ts');
        servicee.createReport (name,function=> {
//Callback function code here
}
)  

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

service.ts

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable()
export class listOfThirdPartiesService {
  constructor() {}
  /************************************************** */
  private listOfThirdPartiesValuesSource = new BehaviorSubject<string[][]>([
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
    ['','','','','','','',''],
  ]);
  currentListOfThirdParties = this.listOfThirdPartiesValuesSource.asObservable();
  /************************************************************************ */
}

И вот как я называю это вthe:

app.ts

import { listOfThirdPartiesService } from "../services/listOfThirdPartiesService.service";

Также в app.module.ts я должен объявить это в поставщиках.
Так что мои вопросы:
В чем разница между двумя способами реализации службы?
И в каких случаях я могу использовать первый и второй?

Answer 1

Посмотрите эту документацию на Услуги

Вы можете просто создать сервис в Angular 2+ и выше, используя приведенную ниже команду

ng generate service your-service

или просто

ng g s your-service

Приведенная выше команда также автоматически регистрирует ваш сервис в модуле.

Теперь, если вы укажите свою службу в поставщиках в NgModule, как показано ниже, то она будет доступна для всех компонентов в этом NgModule

@NgModule({
  providers: [
  YourService,
 ],
 ...
})

Но если вы хотите использовать свой сервис специально только для некоторых компонентов, укажите его в разделе поставщики в своем компоненте

@Component({
  selector:    'app-test',
  templateUrl: './app-test.component.html',
  providers:  [ YourService ]
})

Answer 2

Первый метод, мне кажется, просто определение функции. Это обеспечивает функциональность и закрытие. На самом деле это не «Служба».

Второй метод (с использованием декоратора @Injectable()), сделать класс, ну, инъекционный. Это означает, что он будет играть с системой DI Angular. Вы можете внедрить его в другие классы Angular (Компоненты и Сервисы), передав его в конструктор вместе с типом машинописи. Компилятор Angular посмотрит на своих провайдеров и найдет сервис такого типа, и у вас будет доступ к именно этому экземпляру класса. Вы говорите, что предоставляете это в AppModule. Это означает, что вы предоставляете это в корне приложения, и эта служба будет одноразовой. По сути, этот метод является наиболее удобным. Я пытаюсь объяснить это с помощью изображений в моем полуиспеченном блоге .

С первым методом, если вам важно, сколько у вас экземпляров и с каким экземпляром вы взаимодействуете в любой момент времени, вам нужно будет посмотреть, как вы его импортируете, и разбиваете ли вы код.