Comment puis-je obtenir la valeur d'un observable dans un service à partir d'un composant et le transmettre à mon affichage?

Question

J'ai essayé beaucoup de choses pour cela, et rien ne semble aider.

Ce que je suis en train d'accomplir:

1. utilisateur clique sur le bouton sur la vue des composants de sélection
2. feux de l'événement, appelant changePage() sur le composant de sélection
3. Cela appelle changePage() sur le service et passe dans une chaîne
4. changePage() dans le service met à jour un observable
5. Dans le composant principal, un subscription est créé et modifie la variable valeur de l » pageName sur la base Observable au service
6. Le pageName est mis à jour en en-tête sur la page

service

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

composant de sélection

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

Composant principal

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

Informations mise à jour

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

J'ai lutté avec pendant un certain temps. Certes, je suis assez nouveau à Angular, et peut-être que je suis juste confus sur la façon dont les Observables fonctionnent, mais actuellement cela ne fonctionne pas.

Je reçois un seul console.log dans la console avec "À propos de moi", mais rien après cela. Pas d'erreurs, rien. Le h3 dit à propos de moi, mais ne change pas.

Answer 1

Dans votre composant principal i remarqué que vous fournissez votre PageService comme celui-ci

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

Si vous faites aussi la même chose dans votre sélection de composants vous ne serez pas en mesure d'obtenir le message émis. Cela est dû au fonctionnement de l'injection de dépendances d'Angular. Vous devez avoir un service de page Singleton entre votre composant principal et votre composant de sélection. Si c'est le cas, vous devez supprimer providers: [PageService] des deux composants et seulement le fournir dans votre module racine. (dans la plupart des cas app.module.ts). Essayez cela et voyez si vous ne recevrez pas le message émis par PageComponent dans votre MainComponent.

Modifier

Vous pouvez en savoir plus sur DI here.