Блог

Я пытаюсь передать данные между двумя компонентами через сервисы. Я не уверен, как я могу использовать данные через сервисы из другого компонента. Я получаю данные из 2. Component с помощью метода getData() и сохраняю их в переменной data. Я могу распечатать его внутри метода, но не снаружи метода, а также я попытался передать его первому компоненту. Что не так с моим кодом?

1. Файл компонента

 import {Component, OnInit} from '@angular/core';
import {PassProfileDataService} from '../common/PassProfileDataService';

@Component({

    selector: "profile",
    templateUrl: `client/components/profile/profile.component.html`

})

export class ProfileComponent implements OnInit{
public data;

constructor(private _sharedService: PassProfileDataService){}

ngOnInit() {

this.data = this._sharedService.dataStringSource)
  }

}
  

2. Файл компонента

 import {Component} from '@angular/core';
import {PassProfileDataService} from '../common/PassProfileDataService';

@Component({

    selector: "search",
    templateUrl: `client/components/search/search.component.html`

})
export class ProfileComponent{

constructor(private _sharedService: PassProfileDataService){}

this._sharedService.getData(data[0].values)
ngOnInit() {

  }

}
  

3. SharedService

 import {Component, Injectable} from '@angular/core'

@Injectable()
export class PassProfileDataService {

  public dataStringSource;

  // Service message commands
  getData(data: String) {
    this.dataStringSource  data;

  };

}
  

Насколько я знаю, когда ваш анализ приведет вас к определению службы как общедоступной, вы должны зарегистрировать службу в инициализации приложения: это позволит вам получить доступ к тому же экземпляру службы в вашем приложении Angular2. Практически, в вашем файле app.ts…:

 // other import statements...
import { TheNameService } from "./services/the-name.service";
// other import statements...

@Component({
    // other declarations...
    directives: [TheNameService]
    // other declarations...
})
  

Теперь импортируйте TheNameService с помощью инструкции import в каждый компонент, которому требуется экземпляр сервиса. Помните, ЧТО НЕ вставляйте именуservice в массив поставщиков компонента, иначе вы получите НОВЫЙ экземпляр сервиса в этом компоненте!!

Это решает часть вашего вопроса. В случае, если данные для совместного использования находятся в общедоступном свойстве сервиса, вы настроены. Но что, если вы работаете со сложной службой, которая работает с асинхронными методами? На помощь приходят отправители событий.

В TheNameService объявите свойство типа EventEmitter, где «тип» — это тип данных, передаваемых событием. Т.е..

 public myevent$: EventEmitter<string>;
  

В конструкторе TheNameService не забудьте инициализировать EventEmitter следующим образом:

 this.myEvent$ = new EventEmitter();
  

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

 this.myEvent$.emit("This is the emitted text!");
  

Не забудьте подписаться на компонент для события… Рекомендуется хранить подписку внутри свойства компонента, поскольку нам нужно отменить подписку на прослушиваемые события при уничтожении компонента. Сначала объявите новое частное свойство для вашего компонента:

 private _myEventSubscription: any; // not sure about what kind of data type is returned here...
  

Подпишитесь на событие сервиса в методе ngOnInit:

 ngOnInit() {
    this._myEventSubscription = this._theNameService.myEvent$.subscribe( (emittedString: string) => {
        console.log(emittedString); // will log "This is the emitted text!" in the console
    });
}
  

где это._theNameService — это служба имен, введенная с помощью внедрения зависимостей в конструктор (как показано ниже …)

 constructor(private _theNameService: TheNameService) { }
  

Последнее, что нужно сделать, отменить регистрацию подписки в случае уничтожения компонента:

 ngOnDestroy() {
    this._myEventSubscription.unsubscribe();
}
  

Создайте сервис, который хранит данные при переключении компонентов. Ниже приведен пример.

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

@Injectable()
export class TransfereService {

  constructor(
    private router:Router,
    private companyServiceService:CompanyServiceService
  ) { }

  private data;

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

  getData(){
    let temp = this.data;
    this.clearData();
    return temp;
  }

  clearData(){
    this.data = undefined;
  }

}
  

Теперь рассмотрим 2 компонента — отправителя и получателя.

Код отправителя: этот код устанавливает данные для сервиса и переходит к получателю.

 import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class SenderComponent implements OnInit {         
  constructor(
    private transfereService:TransfereService,
    private router:Router) {}

  somefunction(data){
   this.transfereService.setData(data);
   this.router.navigateByUrl('/reciever');//as per router
 }
}
  

Код получателя: этот код извлекает данные из сервиса и также очищает данные.

 import { Router } from '@angular/router';
import { TransfereService } from './services/transfer.service';

export class RecieverComponent implements OnInit {  
 data = this.transfereService.getData();       
 constructor(
   private transfereService:TransfereService,
   private router:Router) {
      if(this.data){
        // do whatever needed
      }
      else{
        this.router.navigateByUrl('/sender');
      }
   }
}