angular - Angular 2/Typescript はページ間で (動的) データを共有します

Question

わかりました、この質問はおそらくよく尋ねられますが、それでも私は尋ねます。

Typescript/Angular 2 は初めてです。ページ A とページ B の 2 つのページがあります。ページ A では、API A を使用してデータを要求します。データを取得した後、ユーザーはリンク/ボタンをクリックして、ルーティングを介してページ B に切り替えることができます。ページ B は、ページ A に固有のデータを使用して API B からデータを要求します。しかし、ページAからページBにデータを取得できないようです。

親/子/兄弟がオブザーバブルで注入可能なサービスを使用していることを読んだので、それを試しました。しかし、それは機能しません...まったく。

プロバイダーが正しく設定されていること、および注入可能なサービスが 1 回だけインスタンス化されていることを確認しました。

彼らはこれについて書かれたルール/方法ですか？私の状況は、実際には親子関係ではありません。しかし、ちょっとそうです。

基本的にこれは私がしたことです: サービス:

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

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

}

ページ 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;
            } 
        });
    }

}

ここでは、私の意見では機能するはずの必要なコードのみを記載していますが、重要なものを省略している可能性があります。ここにコード全体を入れたくなかっただけです。しかし、基本的にここにあるのは、私が引っ張ろうとしているものです。

ある時点で、あきらめて localStorage を使用してデータを共有し始めましたが、localStorage を使用せずにそれを行う Angular 2/typescript の方法がないとは想像できないため、あまり好きではありませんでした。 .

あなたがこのnoobを与えることができるすべての助けを前もって感謝します;）。

編集: https://stackblitz.com/edit/angular-p2ucdh

ここで機能します。実際のアプリケーションで重大な間違いを犯したに違いありません:(。この時点で、いまいましいもの全体を書き直すかもしれないと思います。

実際のプロジェクト (恐ろしいコード): https://github.com/EldinZenderink/LittleWeebTS/