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

Question

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

我要完成的工作：

1. 用户单击选择组件视图上的按钮
2. 事件触发，在选择组件上调用changePage()
3. 这会在服务上调用changePage() 并传入一个字符串
4. 服务中的changePage() 更新observable
5. 在主组件中，创建一个subscription，并根据服务中的Observable更改变量pageName的值
6. 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，但之后就没有了。没有错误，什么都没有。 h3 会说 About Me，但不会改变。

Answer 1

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

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

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

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

编辑

您可以阅读更多关于 DI here.