Angular 2/Typescript делят (динамические) данные между страницами

Question

Хорошо, этот вопрос, вероятно, часто задавали, но я все еще собираюсь спросить.

Я новичок в Typescript / Angular 2. У меня есть две страницы, скажем, Страница A и Страница B На странице A я использую api A для запроса данных. После получения данных пользователь может щелкнуть ссылку / кнопку, и он / она переключается на страницу B посредством маршрутизации, страница B использует данные, специфичные для страницы A, для запроса данных от api B. Теперь API работает нормально. Но я просто не могу получить данные со страницы А на страницу Б.

Теперь я прочитал, что Parent / Child / Sibling использует инъекционный сервис с наблюдаемым, и я попробовал это. Но это не работает... вообще.

Я удостоверился, что провайдеры установлены правильно и что сервис инъекций создается только один раз.

Является ли их письменное правило / способ пойти по этому поводу? Моя ситуация на самом деле не связана с родителями и детьми. Но вроде как.

В основном это то, что я сделал: Сервис:

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();
   }
}

Страница А:

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']);  
    }

}

Страница Б:

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;
            } 
        });
    }

}

Я только поместил здесь необходимый код, который должен работать, на мой взгляд, но я мог бы упустить что-то важное! Я просто не хотел помещать весь код здесь. Но в основном то, что находится здесь выше, это то, что я пытаюсь вытащить.

В какой-то момент я просто сдался и начал использовать localStorage для обмена данными, но мне это не очень понравилось, так как я не могу представить, что не существует способа Angular 2 / typcript, чтобы сделать это без использования localStorage,

Заранее спасибо за всю помощь, которую вы можете оказать этому нубу;).

РЕДАКТИРОВАТЬ: https://stackblitz.com/edit/angular-p2ucdh

Это работает здесь, я, должно быть, допустил серьезную ошибку в своем действительном заявлении:(. В этот момент я думаю, что мог бы переписать всю эту чертову штуку.

Актуальный проект (с ужасным кодом): https://github.com/EldinZenderink/LittleWeebTS/

Answer 1

Я бы использовал EventEmitter следующим образом:

Страница Б

@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
        );
    }
}

Страница А

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']);  
    }

}

Класс обслуживания

@Injectable()
export class ShareService {

   public dataEmitter = new EventEmitter<string>();

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

   }
}