角型共有サービス - サブスクリプションがコンポーネントに未定義で渡される

Question

共有サービスを使用してシングルトンデザインパターンを実装しようとしているため、すべてのコンポーネントがサービスによって提供される更新されたグローバル変数を受け取ることができます。

結果、アプリコンポーネントから呼び出された場合、それは問題なく更新されることがあるが、これらにsubcribingとき何成分の値を受信して​​いない：

colorString$ = this.colorSource.asObservable(); 

値を返すされていないサブスクライブするために使用される方法であって、

constructor(private sharedSer : SharedColorService) { 
    sharedSer.Update(this.myColor); 
    } 

これはサービスである：

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

@Injectable() 
export class SharedColorService { 

    // Observable string source 
private colorSource = new Subject<string>(); 

// Observable string stream 
colorString$ = this.colorSource.asObservable(); 

// Service message commands 

Update(input:string) { 
    this.colorSource.next(input); 
    console.log("Service Color: " + input); 
} 
} 

これはアプリです.component：

app.component.html：

<h1>APP: {{myColor}}</h1> 
<app-navigation></app-navigation> 

navigation.component

import { Component, OnInit, Injectable } from '@angular/core'; 
import {SharedColorService} from '../sharedColor.service'; 
@Component({ 
    selector: 'app-navigation', 
    templateUrl: './navigation.component.html', 
    styleUrls: ['./navigation.component.css'], 
}) 

export class NavigationComponent{ 
    myColor: string; 
    errors; 
    constructor(private _sharedService: SharedColorService){ 
    console.log("I AM TRYING TO SUBSCRIBE"); 
    this._sharedService.colorString$.subscribe(
    result => { 
     console.log('Navigation received result: ', result); 
     this.myColor = result; 
     }); 
     console.log('Navigation after subscribe: ', this.myColor) 
    } 
} 

そして最後に、私

import { Component, OnInit } from '@angular/core'; 
import {SharedColorService} from './sharedColor.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    colors = ["#31b0d5", "#d55631", "#d531b0", "#31d556"] 
    myColor = this.colors[Math.floor(Math.random()*this.colors.length)]; 

    constructor(private sharedSer : SharedColorService) { 
    console.log("I can log"); 
    console.log("App Color: " + this.myColor); 
    sharedSer.Update(this.myColor); 
    } 
    } 

これは、どのアプリケーションコンポーネントのロードコンポーネントですナビゲーションからロードするルータのアウトレットがあります。

ページをロードする

navigation.component.html

<a class="col-sm-2" routerLink="/about" routerLinkActive="active">About</a> 
<router-outlet></router-outlet> 

about.component

import { Component, OnInit } from '@angular/core'; 
import {SharedColorService} from '../sharedColor.service'; 

@Component({ 
    selector: 'app-about', 
    templateUrl: './about.component.html', 
    styleUrls: ['./about.component.css'] 
}) 
export class AboutComponent implements OnInit { 

myColor: string; 
constructor(private _sharedService: SharedColorService){} 

ngOnInit() { 
    this._sharedService.colorString$.subscribe(
    data => { 
     this.myColor = data; 
      console.log("About received color: " + this.myColor + " Data: " + data); 
    }); 
} 
} 

ログのすべてと、コンソールの出力は次のようになります。

I can log 
app.component.ts:15 App Color: #31d556 
sharedColor.service.ts:16 Service Color: #31d556 
navigation.component.ts:15 I AM TRYING TO SUBSCRIBE 
navigation.component.ts:21 Navigation after subscribe: undefined 

についてアクセスする場合は、私はまだOnInitとそのコンストラクタに関するルータのアウトレットのライフサイクルを理解していません。

Answer 1

それは今の代わりに、被験者の行動件名を使用して動作します：

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

@Injectable() 
export class SharedColorService { 

    // Observable string source 
private colorSource: BehaviorSubject<string>= new BehaviorSubject<string>("#d55631"); 

// Observable string stream 
colorString$ = this.colorSource.asObservable(); 

// Service message commands 
Update(input:string) { 
    this.colorSource.next(input); 
    console.log("Service Color: " + input); 
} 

} 

CONSOLE.LOG

app.component.ts:14 I can log 
app.component.ts:15 App Color: #31b0d5 
sharedColor.service.ts:17 Service Color: #31b0d5 
navigation.component.ts:13 I AM TRYING TO SUBSCRIBE 
navigation.component.ts:16 Navigation received result: #31b0d5 
navigation.component.ts:19 Navigation after subscribe: #31b0d5 
core.es5.js:3025 Angular is running in the development mode. Call 
about.component.ts:18 About received color: #31b0d5 Data: #31b0d5