使用BehaviorSubject组件间传值时遇selectedvalue未初始化错误

错误原因 #

你的服务代码中，content这个BehaviorSubject的初始化语句写在了selectedvalue变量声明之前。TypeScript会按照代码顺序初始化类的属性，所以创建BehaviorSubject时，selectedvalue还没完成初始化，直接引用就触发了这个错误。另外，原代码里只更新了selectedvalue但没有推送新值到BehaviorSubject，订阅的组件根本收不到后续的数据更新，这也是一个隐性问题。

修复方案 #

方案1：调整属性声明顺序（保持初始值关联）

把selectedvalue的声明移到content前面，确保初始化BehaviorSubject时变量已经存在：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, tap } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class HomepageService {
  selectedvalue: Meal[] = [];
  public content = new BehaviorSubject<any>(this.selectedvalue);
  public share = this.content.asObservable();

  constructor(private http: HttpClient, private recipies: /* 你的Recipies服务 */) {}

  loadSubCategoriesFood(name: string): Observable<{ meals: Meal[] }> {
    return this.http
      .get<{ meals: Meal[] }>(
        `${this.recipies.listofsubcategories}filter.php?i=${name}`
      )
      .pipe(
        tap((resultcategory) => {
          this.selectedvalue = resultcategory?.meals;
          // 推送新值到BehaviorSubject，通知订阅组件更新
          this.content.next(this.selectedvalue);
        })
      );
  }
}

方案2：直接使用固定初始值（更简洁）

如果初始值就是空数组，没必要依赖selectedvalue，直接给BehaviorSubject传初始值：

@Injectable({ providedIn: 'root' })
export class HomepageService {
  public content = new BehaviorSubject<Meal[]>([]);
  public share = this.content.asObservable();
  selectedvalue: Meal[] = [];

  constructor(private http: HttpClient, private recipies: /* 你的Recipies服务 */) {}

  loadSubCategoriesFood(name: string): Observable<{ meals: Meal[] }> {
    return this.http
      .get<{ meals: Meal[] }>(
        `${this.recipies.listofsubcategories}filter.php?i=${name}`
      )
      .pipe(
        tap((resultcategory) => {
          this.selectedvalue = resultcategory?.meals;
          this.content.next(this.selectedvalue);
        })
      );
  }
}

组件订阅优化（避免内存泄漏） #

原组件的订阅没有清理逻辑，长时间运行可能导致内存泄漏，建议添加销毁逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { HomepageService } from './homepage.service';

@Component({ /* 组件元数据 */ })
export class CategorypageComponent implements OnInit, OnDestroy {
  private dataSubscription!: Subscription;

  constructor(public categoryfood: HomepageService) {}

  ngOnInit(): void {
    this.dataSubscription = this.categoryfood.share.subscribe((x) =>
      console.log(x)
    );
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.dataSubscription.unsubscribe();
  }
}

或者使用Angular的AsyncPipe自动管理订阅，更简洁：

import { Component } from '@angular/core';
import { HomepageService } from './homepage.service';

@Component({
  template: `<div>{{ sharedData$ | async | json }}</div>`
})
export class CategorypageComponent {
  sharedData$ = this.categoryfood.share;

  constructor(public categoryfood: HomepageService) {}
}

内容的提问来源于stack exchange，提问作者Terry C