如何从组件获取服务中 Observable 的值并将其传递给我的视图？

Question

我为此尝试了很多方法，但似乎没有任何帮助。

我要实现的目标：

用户在选择组件视图上单击按钮
事件触发，在选择组件上调用 changePage()
这会在服务上调用 changePage() 并传入一个字符串
changePage() 在服务中更新一个 observable
在主要组件中，创建了一个 subscription 并根据服务

Observable

pageName

pageName 更新为页面上的页眉

服务

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

@Injectable()

export class PageService{
    pageChange$: Subject<String> = new BehaviorSubject("About Me");

    constructor(){
    }

    public changePage(changeTo: String){
        console.log(changeTo); // LOGS PROPERLY
        this.pageChange$.next(changeTo);
    }
}

选择组件

export class SelectionComponent implements OnInit {

  constructor(private _pageService:PageService) { }

  ngOnInit() {
  }

  // Called on button click, passed a string from the button
  changePage(changeTo: string){
      this._pageService.changePage(changeTo);
  }
}

主要成分

import { Component, OnInit } from '@angular/core';
import { PageService } from '../page-service.service';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-main-content',
  templateUrl: './main-content.component.html',
  styleUrls: ['./main-content.component.css'],
  providers: [PageService]
})
export class MainContentComponent implements OnInit {    
  pageName: String;

  constructor(private _pageService: PageService) {  
  }

  ngOnInit() {
      this._pageService.pageChange$.subscribe(value => {
          console.log(value); // DOES NOT LOG
          this.pageName = value;
      });
}

要更新的信息

<h3 class="content-header">{{ pageName }}</h3>

我已经为此苦苦挣扎了一段时间。诚然，我对 Angular 还很陌生，也许我只是对 Observables 的工作方式感到困惑，但目前它还没有工作。

我在控制台中得到一个 console.log 和 "About Me"，但之后什么也没有。没有错误，什么都没有。 h3 确实说了关于我，但没有改变。

Answer 1

在您的主要组件中，我注意到您正在像这样提供您的 PageService

@Component({
  ...
  providers: [PageService]
})

如果您也在选择组件中执行相同的操作，您将无法获得发出的消息。这是由 Angular 的依赖注入的工作方式引起的。您需要在主组件和选择组件之间有一个单例页面服务。如果是这种情况，您应该从两个组件中删除 providers: [PageService] 并且仅在您的根模块中提供它。（在大多数情况下 app.module.ts）。

尝试一下，看看您是否不会从 MainComponent 中的 PageComponent 获取发出的消息。

编辑

您可以阅读有关 DI 的更多信息here.

如何从组件获取服务中 Observable 的值并将其传递给我的视图？

How do I get the value of an Observable in a service from a component and pass it to my view?

observable

rxjs

angular2-observables

angular