为什么我需要重新加载我的页面才能从 Angular 中的 subjectSubscription 获取数据？

Question

我运行在我的 angular 应用程序中遇到问题。

我想使用 ngOnInit() 和对主题的订阅从我的组件“statsview”中的 firebase 获取数据。

这里是订阅主题。

      export class StatsviewComponent implements OnInit, OnDestroy {
      
      stats : Stats;
      statsSubscription : Subscription;  
      
      constructor(private hbService:HbService) { }
      
      ngOnInit(): void {
        this.statsSubscription = this.hbService.statsSubject.subscribe(
          (stats:Stats) => {            
              this.stats= stats;           
          }
        );
        this.hbService.statsSubject.next(this.stats);
      }

这是我要显示的内容。

      
      <h1>nc : {{ stats.nc }}</h1>
      <h1>Réponse au 1er Message : {{ stats.firstMess }}</h1>
      <h1>Date : {{ stats.firstDate }}</h1>
      <h1>FC : {{ stats.fc }} </h1>

当应用程序加载页面时，observable 中的值“stats”获得了正确的数据并且它有效但是当我继续另一个组件并返回到我的“ statsview" 的值 "stats" 是 undefined 并且视图中没有显示任何内容。为了让我的 statsview 正常工作，我需要重新加载页面 (F5)...

我不明白为什么当我在我的应用程序中导航并返回我的 statview 而不刷新页面时它不能正常工作。

我的主题声明在 hbService 中，我将函数 getStats() 放在构造函数中。

这里是 hbService 中的函数 getStats()。

getStats(){
    firebase.database().ref('/stats/').on('value', (data: DataSnapshot) => {
      this.stats = data.val() ? data.val() : this.stats;
      this.statsSubject.next(this.stats); 
    });

这里是hbService的构造函数中调用的函数和主体的声明

export class HbService {

  stats : Stats;
  statsSubject = new Subject<Stats>();
   
  constructor(private router: Router) { this.getHbs(); this.getStats(); }

我想知道为什么当我在其他组件中导航并返回到我的组件 statsview 时，我的可观察对象没有从主题订阅中获取数据。

Answer 1

试试 BehaviourSubject:

statsSubject = new BehaviourSubject<Stats>(undefined);

它可以容纳一个 currentValue 并在订阅时发出它，而常规 Subject 只会在它被推送到的同一时刻发出。

为什么我需要重新加载我的页面才能从 Angular 中的 subjectSubscription 获取数据？

Why do I need to reload my page to get data from a subjectSubscription in Angular?

observable

rxjs

angular