Angular 4 Observable returns undefined

首先，这与一些http请求无关，它是一种简单的场景，其中一个组件设置一个布尔值，另一个组件根据它显示/隐藏元素。Angular 4 Observable returns undefined

问题是其他组件在订阅回调中总是收到'undefined'。但是，我试图让主要组件订阅，并且它正确接收值。

这里是我的代码：

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方法一个按钮，它的工作原理。控制台输出本上点击：

应用比较：真正

服务：真

切换

不确定

再次点击将true值切换到false但仍然给未定义。

任何人有一个想法这里发生了什么？

来源

2017-09-25 T.Aoukar

我不明白为什么'app comp：true'可以是真的。有些东西可以帮助你，开始初始化你的主题：'private _enabled = new Subject （false）;' –

@ DeblatonJean-Philippe主题没有带参数的构造函数。 –

谢谢你，在这里看到：https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject 我错了。 –

当您将EnablerService置于组件的providers阵列中时，它将收到服务的新实例，而您需要在组件之间共享一个服务。您应该只在某些父组件中提供EnablerService（可能是AppRoot组件）并在子组件中使用它（注入它）。

的样例用法见docs：只有MissionControlComponent已MissionService在providers上市，AstronautComponent没有 - 它只是注入。

来源

2017-09-25 15:38:47 tdragon

它现在的作品，谢谢你的回答，没有注意到我只需要将它注册为供应商一次。 –

我曾经有同样的问题:)这个想法很快就在这里描述：https://angular.io/guide/architecture#dependency-injection。 – tdragon

我们不应该只在服务提供者app.module中注入服务，也不需要在每个组件中再次注入它作为提供者 –

Angular 4 Observable returns undefined

回答

相关问题