Angular 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

如果你像这样在 @Component 中使用 providers

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

这意味着每个组件都有自己的服务实例。

将此移动到 @NgModule 内的 AppModule.ts，然后服务将在整个模块中相同。

您可以阅读何时在组件中注入 here

Angular 2 从组件到服务共享数据并返回到另一个组件

Angular 2 sharing data from component to service and back to another component

angular

observable

angular2-services

angular2-observables