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

我为此尝试了很多事情，似乎没有任何帮助。如何从组件中获取服务中Observable的值并将其传递给我的视图？

我试图做到：

用户点击选择组件视图
事件触发按钮，选择组件上调用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文件，并且之后没有任何内容。没有错误，没有。 h3是否说关于我，但不会改变。

来源

2017-10-11 TjDev

，我们可以看到在模板（你执行点击）的结合？ –

我现在不在我的PC附近，但它是（click）=“changePage（'按钮值'）” – TjDev

在主成分我注意到，您提供您的PageService这样

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

如果你也正在做同样的你的选择成分您将无法获得所发出的消息。这是Angular的依赖注入如何工作的原因。您需要在主要组件和选择组件之间有一个Singleton PageService。如果是这样的话，你应该从两个组件中删除providers: [PageService]，并且只有在你的根模块中提供它。（大多数情况下为app.module.ts）。

试试看看你是否不会从你的MainComponent中的PageComponent获得发出的消息。

编辑

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

来源

2017-10-12 00:06:18 Andresson

谢谢你的建议！我甚至没有想到这一点，而且这似乎奏效了。看起来像我的问题是我的结构是作为兄弟姐妹的主要组件和选择组件，并且PageService被作为提供者添加到两者中。将它从两个提供程序中移除并将其添加到父元素（应用程序组件）中的提供程序列表中后，它将完美起作用！ – TjDev

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

回答

相关问题