Angular 使用服务在组件之间共享数据

我创建了一个简单的服务来存储我想在我的应用程序组件中共享的号码：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NumberService {

  private number = new BehaviorSubject(0);

  constructor() { }

  increaseCount(number:number) {
    let newVal = this.number.getValue() + number;
    this.number.next(newVal);
  }

  decreaseCount(number:number) {
    let newVal = this.number.getValue() - number;
    this.number.next(newVal);
  }

  multiplyCount(number:number) {
    let newVal = this.number.getValue() * number;
    this.number.next(newVal);
  }

  getNumberValue() {
    return this.number.getValue();
  }

  $getNumber(): Observable<number> {
    return this.number.asObservable();
  }
}

这会将预期的

36

输出到我的模板

如果我尝试在另一个页面中使用该服务，如下所示：

import { Component } from '@angular/core';
import { NumberService } from '../../services/number.service'; 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  number = this.numberService.getNumberValue();

  constructor(private numberService: NumberService) {
    this.numberService.increaseCount(5);
    this.numberService.increaseCount(10);
    this.numberService.decreaseCount(3);
    this.numberService.multiplyCount(3);

    this.numberService.$getNumber().subscribe((newNumber) => {
      this.number = newNumber;
    });
  }

}

import { Component, OnInit } from '@angular/core';
import { NumberService } from '../../services/number.service'; 

@Component({
  selector: 'app-page2',
  templateUrl: './page2.page.html',
  styleUrls: ['./page2.page.scss'],
})
export class Page2Page implements OnInit {

  //number = this.numberService.getNumberValue();
  number:number;

  constructor(private numberService: NumberService) { }

  ngOnInit() {
    this.numberService.$getNumber().subscribe((newNumber) => {
      this.number = newNumber;
    })
  }

}

我的模板显示的是

0

，其中我希望看到

36

，因为这是从其他组件设置的值

---

你认为我在这项服务上有什么问题吗？

在你的page2组件内部。订阅（）你会得到哪个号码？@GaurangDhorda我得到一个

0

。而且两个组件也是同一个模块？是的。我相信我发现了我的错误。我在静态访问

/home

和

/page2

而不是链接它们。只要将

/home

链接到

/page2

，我就能够像预期的那样显示

36

。