Angular 如何从组件获取服务中的可观察值并将其传递给视图？

我为此做了很多尝试，但似乎没有任何效果

我正在努力实现的目标：

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

用户单击选择组件视图上的按钮

事件激发，在选择组件上调用

changePage（）

这将调用服务上的

changePage（）

，并以字符串形式传递

服务中的

changePage（）

更新可观察的

在主组件中，将创建一个

订阅

，并根据服务中的

可观察的

更改变量

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>

{{pageName}

我已经为此挣扎了一段时间。诚然，我对角度观测是相当陌生的，也许我只是对观测值是如何工作的感到困惑，但目前它不起作用

---

我得到了一个控制台。在控制台中登录“关于我”，但之后什么都没有。没有错误，什么都没有。h3确实提到了我，但没有改变。

在您的主要组件中，我注意到您提供的页面服务是这样的

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

如果在选择组件中也执行同样的操作，则无法获取发出的消息。这是由Angular的依赖项注入工作原理造成的。在主组件和选择组件之间需要一个单例页面服务。如果是这种情况，您应该从这两个组件中删除

提供者：[PageService]

，并且只在根模块中提供它。（在大多数情况下

app.module.ts

）

尝试一下，看看是否无法从主组件中的PageComponent获取发出的消息

编辑

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;
      });
}

---

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

我们可以在模板中看到绑定吗（您可以在其中执行单击）？我现在不在电脑附近，但它（单击）=“changePage（'按钮值'）”感谢您的建议！我甚至没有想到这一点，这似乎奏效了。看起来我的问题是，我的结构是作为兄弟的主组件和选择组件，PageService作为提供者添加到这两个组件中。从“作为提供者”和“作为提供者”中删除它并将其添加到父元素（应用程序组件）的“提供者”列表中后，它可以完美地工作！