Как передать данные из компонента в сервис в angular 2?

@marisa 

Для передачи данных из компонента в сервис в Angular 2 необходимо выполнить следующие шаги:

1. Создайте сервис, используя команду ng generate service <service-name> или вручную создайте класс сервиса с помощью директивы @Injectable(). Например, my-service.service.ts.
2. В компоненте импортируйте сервис, используя директиву import. Например, import { MyService } from './my-service.service';
3. В конструкторе компонента вставьте параметр, который ссылается на объект сервиса. Например, constructor(private myService: MyService) { }.
4. В методе компонента вызовите метод сервиса и передайте ему данные, которые нужно передать в сервис. Например, this.myService.setData(myData);.
5. В сервисе определите метод, который принимает данные, которые были переданы из компонента. Например, setData(data: any) { this.data = data; }.
6. В методе сервиса вы можете обрабатывать данные или сохранять их для последующего использования.

Пример передачи данных из компонента в сервис в Angular 2:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// MyService.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData(): any {
    return this.data;
  }
}

// MyComponent.component.ts
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private myService: MyService) {}

  sendDataToService(myData: any) {
    this.myService.setData(myData);
  }
}

Вы можете получить данные, сохраненные в сервисе, в любом компоненте или другом сервисе, используя метод getData() в сервисе.

Примечание: При использовании сервиса, который хранит состояние данных, необходимо убедиться, что все компоненты, которые используют этот сервис, используют один и тот же экземпляр сервиса. Это можно обеспечить, добавив сервис в раздел providers в NgModule или используя директиву providedIn: 'root' в сервисе.