Angular 2/Typescript share (dynamic) data between pages

Question

Alright, this question is probably asked quit alot, but I am still going to ask.

I am new to Typescript/Angular 2. I have two pages, lets say Page A and Page B On page A i use api A to request data. After retreiving the data, the user can click on a link/button and he/she switches to page B through routing, page B uses data specific from page A to request data from api B. Now the API stuff is working fine. But I just can't seem to get data from page A to page B.

Now I have read that Parent/Child/Sibling uses a injectable service with a obeservable and I tried that. But it doesn't work... at all.

I made sure that the providers are set correctly and that the injectable service is instantiated only once.

Is their a written rule/way to go about this? My situation isn't really Parent/Child related. But kinda is.

Basically this is what I did: Service:

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

@Injectable()
export class ShareService {

   public data : Subject<string> = new BehaviorSubject<string>(null);

   constructor(){
   } 
   setData(newdata : string){
       this.data.next(newdata);
   }

   clearData(){
       this.data.next();
   }
}

Page A:

import {Component, OnInit, OnDestroy} from '@angular/core';
import {ShareService} from '../../services/share.service'
import {Subject} from 'rxjs/Rx';
import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
@Component({
    selector: 'pagea',
    template: `
        <button (click)="gotoPageB()" class="item" > click me </button>
`
})
export class CurrentlyAiring {
    constructor(private shareService: ShareService, private router: Router){
    }
    gotoPageB(){
        this.shareService.setData("Normally I would send a json string here!");
        this.router.navigate(['/pageb']);  
    }

}

Page B:

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router} from '@angular/router';
import {ShareService} from '../../services/share.service'
import {Subject} from 'rxjs/Rx';
import 'rxjs/add/observable/of'; //proper way to import the 'of' operator
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
@Component({
    selector: 'pageb',
    template: `
        <button  class="item" > {{somedata}} </button>
`
})
export class CurrentlyAiring {
    somedata : string;
    constructor(private shareService: ShareService){
        this.packlistobserver = this.shareService.data.subscribe((data) => {
            if(json !== null){
                this.somedata = data;
            } 
        });
    }

}

I only put the necessary code here which should work in my opinion, but I might have left out something important! I just didn't want to put the whole code here. But basically what is above here is what I am trying to pull of.

At one point I was just giving up and started using localStorage to share data, but I didn't really like it, since I can't imagine that there isn't a Angular 2/typescript way to do it without the use of localStorage.

Thanks in advance for all the help you can give this noob ;).

EDIT: https://stackblitz.com/edit/angular-p2ucdh

It works here, I must have made a grave mistake in my actual application :(. At this point I think I might rewrite the whole damn thing.

Actual project (with horrible code): https://github.com/EldinZenderink/LittleWeebTS/

Answer 1

I would use an EventEmitter as follow:

Page B

@Component({
    selector: 'pageb',
    template: `
        <button  class="item" > {{somedata}} </button>
`
})
export class CurrentlyAiring implements OnInit {
    somedata : string;
    constructor(private shareService: ShareService){ }

    ngOnInit() {
        this.shareService.dataEmitter.subscribe(
            (data:string) => this.somedata = data
        );
    }
}

Page A

export class CurrentlyAiring  {

    constructor(private shareService: ShareService, private router: Router){
    }

    gotoPageB(){
        this.shareService.setData("Normally I would send a json string here!");
        this.router.navigate(['/pageb']);  
    }

}

Service Class

@Injectable()
export class ShareService {

   public dataEmitter = new EventEmitter<string>();

   constructor(){
   } 
   setData(newdata : string){
       this.dataEmitter.emit(newdata);

   }
}