首先,这与一些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
但仍然给未定义。
任何人有一个想法这里发生了什么?
我不明白为什么'app comp:true'可以是真的。有些东西可以帮助你,开始初始化你的主题:'private _enabled = new Subject(false);' –
@ DeblatonJean-Philippe主题没有带参数的构造函数。 –
谢谢你,在这里看到:https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject 我错了。 –