0

I am working on angular 2 application with open layer map. in that i need to share the location coordinate from one components to other components using share services.

searchcomponents.ts

 bounds: any;
placesChanged() {
    var places = this.searchBox.getPlaces();

    if (places == null) return;
    if (places == undefined) return;
    if (places.length == 0) return;

    this.searchResultsSource.clear();

    this.bounds = new google.maps.LatLngBounds();
    // For each place, get the icon, name and location.
    places.forEach(this.processPlace.bind(this));

    // if the drawn result(s) is only one
    if (this.searchResultsSource.getFeatures().length == 1) {
        var singleFeature = this.searchResultsSource.getFeatures()[0];
        this.pos = singleFeature.getGeometry().getCoordinates();
        console.log(this.pos ,"hanumanh" );
        this.service.setUrlHistoryObj(this.pos);
    }

i want to share pos value to other components. this is my service code

Search.services.ts

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

@Injectable()
export class SearchService {
public pos : string;
public invokeEvent:Subject<any> = new Subject<string>();
constructor() {   
this.pos="";
 }
public setUrlHistoryObj(val: string): void {
        this.pos = val;
        console.log(val);
    }
    public getUrlHistoryObj(): string {
        return this.pos;    
  }

in this i am getting the pos value as geocoordinate and i want to share that pos value to other components.

Buffer.components.ts

value1: string;

constructor(
    private urlHistoryService:SearchService) {

    this.value1 = this.urlHistoryService.getUrlHistoryObj();
   // this.value1 = this.urlHistoryService.setUrlHistoryObj();

}

i am getting error undefined. please help me.

Harshal
  • 63
  • 1
  • 10
  • Where are you providing this service? – eko May 17 '17 at 12:13
  • @echonax i am providing this service in searchcomponents.ts to get the pos value. and i want to share in Buffer.components.ts . sorry i am new to angular . if i did any mistake please guide me. – Harshal May 17 '17 at 12:17
  • Can you check: http://stackoverflow.com/questions/43997489/component-service-global-variable-change-content/43997672#43997672 and tell me if its the same issue? – eko May 17 '17 at 12:18
  • @echonax i am not using `@NgModule` and service is singleton i already put providers :[SearchService] in that. – Harshal May 17 '17 at 12:28
  • Can you create a plunker, It's hard to tell from your description what is giving you the error and whether or not it's coming from bad syntax or a legitimate error in your data flow – Thierry Blais May 17 '17 at 12:28
  • @user2635445 where did you put `providers :[SearchService]`? Can you include it in your question? – eko May 17 '17 at 12:29
  • this question looks like the exact same setup you're trying to achieve. http://stackoverflow.com/questions/35273106/angular2-share-data-between-components-using-services?rq=1 – Thierry Blais May 17 '17 at 12:31
  • 1
    @user2635445 so how is your service a singleton? Please read the links carefully. You need to define the provider in a higher level than these two components. – eko May 17 '17 at 12:33
  • please post the @ngModule code – Thierry Blais May 17 '17 at 12:35
  • Not sure if that is your real code, but you cannot get anything from `this` in `constructor`. I.e. for `BufferComponent` it should be `this.value1 = urlHistoryService.getUrlHistoryObj()` – A. Tim May 17 '17 at 12:37
  • @Likwid_T `@NgModule({ imports: [ BrowserModule, HttpModule, MaterialModule, FormsModule ], declarations: [ AppComponent, RoiCreateComponent, SearchComponent, BufferDialogComponent, ], providers: [ RoiService, ArticleService, RoiDialogService, ArticleDialogService, FacebookService, AppService, LoginService, BufferDialogService ], entryComponents: [RoiDialogComponent, ArticleDialogComponent, BufferDialogComponent], bootstrap: [AppComponent] })` – Harshal May 17 '17 at 12:40
  • @A.Tim i tried but its not working. – Harshal May 17 '17 at 12:44
  • @user2635445 have you applied the solution that I've given in the link above? Remove the service from both of your `@Component`s and add it to the `@NgModule` – eko May 17 '17 at 12:45
  • @echonax i put service provider in ` @Component({ selector: 'poi-buffer', template: ` < html code> `, providers:[SearchService], encapsulation: ViewEncapsulation.None }) ` – Harshal May 17 '17 at 12:46
  • @user2635445 and I'm trying to tell you that you are doing it wrong. – eko May 17 '17 at 12:47
  • @echonax can u please tell me how to do it right. – Harshal May 17 '17 at 12:52
  • @user2635445 aren't you reading my comments? :-) – eko May 17 '17 at 12:53
  • 1
    @echonax i remove the services from `@components` and add to the `@NgModule` and its working. thank you very much – Harshal May 17 '17 at 13:05
  • @user2635445 Glad I could help. We should mark it as a duplicate then :-) – eko May 17 '17 at 13:05
  • 1
    @echonax thank you very much for guidance. – Harshal May 17 '17 at 13:09

0 Answers0