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方法绑定到按钮，它可以正常工作。控制台在点击时输出：

app comp：true

service：true

切换

未定义

再次点击会将true值切换为false，但仍会提供未定义的内容。

任何人都知道这里发生了什么？

Answer 1

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

有关示例用法，请参阅docs：只有MissionControlComponent MissionService中列出了providers，AstronautComponent中没有StringBuilder - 它刚刚注入。

Angular 4 Observable返回undefined

1 个答案: