0

I am trying to pass a variable from one component to another. I am doing that by using a service:

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


    @Injectable()
    export class SharedService {
      // private questionNumber = new Subject<number>();
      // questionNumber$ = this.questionNumber.asObservable();
      questionNumber : number;
      publishData(number:number) {
        this.questionNumber = number;
        console.log(this.questionNumber,'publish');
      }

  getQuestionData(){
    console.log(this.questionNumber,'get');
    return this.questionNumber;
  }

  constructor() { }

}

If the data gets changed in the function "publishData" it writes the current variable value in the console:

publish Variable

But if I try to access that variable it is still undefined as if it isn't changed

Undefined get

Component 1 (excerpt) :

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-main-quiz',
  templateUrl: './main-quiz.component.html',
  styleUrls: ['./main-quiz.component.css'],
  encapsulation: ViewEncapsulation.None,
  providers: [SharedService]
})
export class MainQuizComponent implements OnInit {

  constructor(private _sharedService: SharedService){
    this._sharedService = _sharedService;
  }

  updateQuestion(){
    this._sharedService.publishData(this.questionNumber);
  };

Component 2:

import { Component, OnInit, Input } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-win-page',
  templateUrl: './win-page.component.html',
  styleUrls: ['./win-page.component.css'],
  encapsulation: ViewEncapsulation.None,
  inputs: ['questionNumber'],
  providers: [SharedService]
})
export class WinPageComponent implements OnInit {

  constructor(private _sharedService : SharedService) {
    this._sharedService = _sharedService;
    this.questionNumber = this._sharedService.getQuestionData();
   }

  questionNumber : number;

  ngOnInit() {

  }

  ngOnChanges(){
    this.questionNumber = this._sharedService.getQuestionData();
  }

}

Why isn't that variable updated ?

Thanks for your help!

16
  • how do you call it? maybe you're getting the variable before it's set? Commented Jun 22, 2017 at 7:25
  • In my second component: ngOnChanges(){ this.questionNumber = this._sharedService.getQuestionData(); } Commented Jun 22, 2017 at 7:28
  • 2
    Can you share the component codes? (with their @Component annotation) Commented Jun 22, 2017 at 7:30
  • 1
    where do you set it? Commented Jun 22, 2017 at 7:34
  • 2
    Possible duplicate of Angular - shared service between components doesn't work Commented Jun 22, 2017 at 7:35

1 Answer 1

2

As already answered here: Angular - shared service between components doesn't work

Each component has :

providers: [SharedService]

So based on the angular DI Hierachy the service will be available only for the current component. In your case that mean each components will have his own instance (service isolation).

If you want your component to share the same instance you need to declare the provider at the module level.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.