각도 4 Observable returned undefined

Question

먼저, 이것은 어떤 http 요청과 관련이 없습니다. 구성 요소가 부울 값을 설정하고 다른 구성 요소가이를 기반으로 표시/숨기기를하는 훨씬 간단한 시나리오입니다.

문제는 다른 구성 요소는 구독 취소 콜백에서 항상 '정의되지 않음'을 수신한다는 것입니다. 그러나, 나는 주 구성 요소를 구독하게 만들려고 노력했고, 값을 올바르게 받고있다.

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 값을 전환됩니다 다시 클릭

정의되지 않은

전환하지만, 여전히 undefined를 제공합니다.

누구나 여기에 무슨 일이 일어 났는지 생각할 수 있습니까 ??

Answer 1

을 구성 요소의 providers 배열에 배치하면 구성 요소간에 하나를 공유해야하지만 서비스의 새 인스턴스를 받게됩니다. 일부 부모 구성 요소 (어쩌면 AppRoot 구성 요소)에만 EnablerService을 제공하고 하위 구성 요소에 사용 (삽입)해야합니다.

은 샘플 사용에 대한 docs을 참조하십시오에만 MissionControlComponent이 MissionService이 providers에 나와있다, AstronautComponent하지 않습니다 - 그것은 단지 주입했다.