角共享服務 - 訂閱通過未定義組件

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：

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

這是組件，它的應用程序部件載荷：

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

最後我有一個路由器插座，從導航載入：

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