角4 Observable returned undefined

Question

まず最初に、これはいくつかのhttpリクエストとは関係なく、コンポーネントがブール値を設定し、それに基づいて別のコンポーネントdisplay/hide要素を設定する方がはるかに簡単なシナリオです。

問題は、他のコンポーネントがサブスクライブコールバックで常に「未定義」を受信することです。しかし、私も主なコンポーネントを購読させようとしましたが、正しく値を受け取りました。

ここに私のコードです：

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

@Injectable() 
export class EnablerService { 
    private _enabled= new Subject<boolean>(); 
    get Enabled() { return this._enabled.asObservable(); } 
    SetEnabled(value: boolean) { 
    this._enabled.next(value); 
    console.log(`service: ${value}`); 
    } 
} 

主成分：

import { Component } from '@angular/core'; 
import {EnablerService} from './enabler.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [EnablerService] 
}) 

export class AppComponent { 
    title = 'app'; 
    private _isEnabled: boolean; 
    constructor(public service: EnablerService) { 
    service.Enabled.subscribe(val => { 
     this._isEnabled = val; 
     console.log(`app comp: ${this._isEnabled}`); 
    }); 
    } 

    Switch() { 
    this.service.SetEnabled(!this._isEnabled); 
    console.log('switched'); 
    } 
} 

他の成分：

import { Component, OnInit } from '@angular/core'; 
import {EnablerService} from './enabler.service'; 

@Component({ 
    selector: 'app-footer', 
    templateUrl: './footer.component.html', 
    styleUrls: ['./footer.component.css'], 
    providers: [EnablerService] 
}) 
export class FooterComponent implements OnInit { 
    private _isEnabled: boolean; 
    constructor(private service: EnablerService) { 
    this._isEnabled = true; 
    } 

    ngOnInit() { 
    this.service.Enabled.subscribe(val => { 
     this._isEnabled = val; // this one here. 
     console.log(`footer comp: ${this._isEnabled}`); 
    }); 
    } 

} 

主成分がボタンにSwitch方法を結合し、それが動作しますが。クリックでコンソール出力する：

アプリカンプ：真

サービス：真

は再びfalseにtrue値を切り替えますクリック

未定義

を切り替えるが、それでも未定義です。

誰でもここで何が起こっているのか考えていますか？

Answer 1

コンポーネントのprovidersアレイにEnablerServiceを配置すると、サービスの新しいインスタンスが受信されますが、コンポーネント間で共有する必要があります。いくつかの親コンポーネントだけ（おそらくAppRootコンポーネント）にEnablerServiceを提供し、それを子コンポーネントで使用する（注入する）必要があります。

は、サンプルの使用のためのdocsを参照してください：のみMissionControlComponentはprovidersに記載されているMissionServiceを持って、AstronautComponentはありません - それはそれだけで注入しました。