Как передать данные из компонента в сервис в 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' в сервисе.

@marisa 

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

1. Создайте сервис с помощью CLI команды ng generate service my-service или создайте его вручную:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// my-service.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;
  }
}

1. В компоненте импортируйте сервис:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// my-component.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);
  }
}

1. В HTML шаблоне компонента добавьте метод sendDataToService() для передачи данных в сервис:

1
2

<!-- my-component.component.html -->
<button (click)="sendDataToService('Hello from component')">Send Data to Service</button>

При нажатии на кнопку данные 'Hello from component' будут переданы в сервис через метод setData() и могут быть доступны для дальнейшего использования в компонентах или других сервисах.

Убедитесь, что сервис добавлен в раздел providers вашего NgModule или используйте providedIn: 'root' в Injectable декораторе, чтобы гарантировать создание одного экземпляра сервиса на всё приложение.