Using Service to pass data between components angular2

Question

I am passing data between two components using service

UserComponent

onSubmit(username:string){
    this.dataService.push(this.user);
    this.navigate();
}

navigate(){
    this.router.navigate(['question']);
}

Question Component

import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
import { DataService } from '.././services/data.service';

@Component({
  moduleId: module.id,
  selector: 'question',
  templateUrl: 'question.component.html',
})
export class QuestionComponent {
name : string;
constructor(private dataService: DataService, private renderer: Renderer) {

  }
  ngOnInit() {
    console.log("Here");
    this.dataService.pushData.subscribe((data:any) => this.name = data);
  }

Service

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

@Injectable()
export class DataService{
    pushData = new EventEmitter<string>();

    push(value:string){
        console.log("In Service");
        this.pushData.emit(value);
    }
}

}

But i am able able to get the data in the question component and no error in console

Please provide more code. Where do you provide the service. What is the exact class declaration (name and decorator). Currently it's entirely unclear where is what happening. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 31, 2017 at 11:35

Rahul Singh · Accepted Answer · 2017-01-31 12:34:19Z

2

You have the UserComponent loaded and you push some data to the service.
The service fires an event for those interested in the data push
You navigate and load the QuestionComponent
The QuestionComponent then subscribes to the service event (too late)

Long story short: Step 2 happened before step 4 so step 4s event handler for pushed data will never fire, it started listening too late (after the event was called).

Edit

What you are probably looking for (I realize in hindsight) is to pass parameters to your component during navigation, ie. parameters in the route. If that is all you need a service is not necessary, you can pass them using the routing types and read them back in your component.

See the documentation on Routing & Navigation

UserComponent

navigate(){
    this.router.navigate(['question', {user: this.user}]);
}

QuestionComponent

import { ActivatedRoute  } from '@angular/router';
constructor(private route:ActivatedRoute) {
}

ngOnInit(): void {
    const user = this.route.snapshot.params['user'];
}

edited Jan 31, 2017 at 12:34

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

answered Jan 31, 2017 at 11:39

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user7161814 Over a year ago

why are we getting the array back in the Question Component this.data, do i need to create an additional array

Igor Over a year ago

@INFOSYS - I am not following your questions. What part are you stuck on?

user7161814 Over a year ago

in the question component this line this.data = this.dataService.data.slice(0); // initial load of already present values, slice makes a copy of the array ,we are basically storing it in service and retriving the values , how to work with just the event emitter. i donot want to use a local storage again here

Igor Over a year ago

@INFOSYS - then remove slice and let the service track the data. Either way you need to read the already loaded data in during ngOnInit because the question component was possibly (actually definitely in this case) not yet active when data was loaded by other components.

user7161814 Over a year ago

so this means that we need to have local storage to access data passed by the user component, this way we need not have an event emitter as the value passed by the user component will given by the user , we can just use a local storage

|

Collectives™ on Stack Overflow

Using Service to pass data between components angular2

1 Answer 1

Edit

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related