Угловой 2 обмен данными от компонента к сервису и обратно к другому компоненту

Question

У меня есть компонент, где я устанавливаю значение булевой переменной в службу и другой компонент, на котором я подписался на одну и ту же услугу.

Проблема в том, что я не получаю никаких обновлений в компоненте 2, на котором я подписан.

Если я поставлю метод подписки в компоненте 1 ngOnInit, все будет работать нормально.

спасибо!

Образец

Компонент 1

import {Component} from '@angular/core'; 

import {SharedService} from '../shared/shared.service'; 

@Component({ 
    selector: 'welcome', 
    templateUrl: './welcome.component.html', 
    styleUrls: ['./welcome.component.css'], 
    providers: [SharedService], 
}) 

export class WelcomeComponent { 

    constructor(private sharedService: SharedService) {} 

    contentClicked(){ 
     this.sharedService.setSaveBtnStatus(true); 
    } 
} 

Компонент 2

import {Component} from '@angular/core'; 

import {SharedService} from '../shared/shared.service'; 

@Component({ 
    selector: 'navigation', 
    templateUrl: './navigation.component.html', 
    styleUrls: ['./navigation.component.css'], 
    providers: [SharedService] 
}) 
export class NavigationComponent { 

    constructor(private sharedService: SharedService) {} 

    ngOnInit() { 
     this.sharedService.getSaveBtnStatus().subscribe(
     data => console.log(data), 
     err => console.log(err), 
     () => console.log('finished') 
    ); 
    } 
} 

Сервис

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

@Injectable() 
export class SharedService{ 
    private showSaveBtn = new Subject<boolean>(); 

    getSaveBtnStatus(){ 
     return this.showSaveBtn.asObservable(); 
    } 

    setSaveBtnStatus(value: boolean){ 
     this.showSaveBtn.next(value); 
    } 
} 

Answer 1

Если вы используете providers в @Component как это

@Component({ 
    selector: 'navigation', 
    templateUrl: './navigation.component.html', 
    styleUrls: ['./navigation.component.css'], 
    providers: [SharedService] // <-- here 
}) 

Это означает, что каждый компонент будет иметь свой экземпляр вашего сервиса.

Переместите это на AppModule.ts внутри @NgModule, тогда сервис будет одинаковым по всему модулю.

Вы можете читать, когда вводить в компонент here