Angular 14：如何在Service变量变化时触发组件获取更新？

问题背景 #

需要实现组件与Service的关联逻辑：

• 点击操作触发Component 1调用Service内函数
• Service从API获取数据并存储
• Component 2获取更新后的数据并展示

目前步骤1、2已完成，但Component 2无法获取Service中更新后的值，仅在初始化时能拿到数据。

核心错误原因 #

你在Service中错误地直接替换了Subject对象：

// 错误写法：把Subject对象替换成了普通数据
this.userCreatures = res.data

Subject作为RxJS的可观察对象，需要通过next()方法推送新值，才能让订阅它的组件收到更新通知。直接赋值会破坏原有的Subject订阅关系，导致后续更新无法传递。

修正后的代码 #

1. UserService 修正 #

import { Injectable } from '@angular/core';
import {User} from "./models/user.model";
import {Observable, Subject} from "rxjs";
import axios from "axios";
import {HttpClient} from "@angular/common/http";

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

  user!: User;
  // 私有Subject，仅内部推送值
  private _userCreatures: Subject<any> = new Subject();
  // 对外暴露Observable，防止外部随意推送值
  userCreatures$: Observable<any> = this._userCreatures.asObservable();

  constructor(private http: HttpClient) { }

  setUser(user : User) {
    this.user = user;
  }

  setCreatures(id: number) {
    axios.get('http://127.0.0.1:8000/api/custom_creatures?account=/api/accounts/'+id , {
      headers: {
        "Accept" : 'application/json'
      }
    }).then( (res) => {
      console.log(res);
      // 用next()推送新数据
      this._userCreatures.next(res.data);
      console.log(this._userCreatures);
    });
  }
}

2. Component 2 修正 #

import {Component, OnInit, OnDestroy} from '@angular/core';
import { UserService} from "../user.service";
import { Observable, Subject } from "rxjs";
import { takeUntil } from 'rxjs/operators';
import axios from "axios";

@Component({
  selector: 'app-cards-panel',
  templateUrl: './cards-panel.component.html',
  styleUrls: ['./cards-panel.component.scss']
})
export class CardsPanelComponent implements OnInit, OnDestroy {

  panelActive : boolean = false;
  cards$!: Observable<any>;
  // 用于取消订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  constructor(private UserService: UserService) {}

  ngOnInit(): void {
    axios.get('http://127.0.0.1:8000/api/accounts/1', {
      headers : {
        "Accept" : 'application/json'
      }
    }).then( (res) => {
      this.UserService.setUser(res.data);
    });

    // 订阅Service的可观察对象，组件销毁时自动取消订阅
    this.UserService.userCreatures$
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        this.cards$ = data;
        console.log(this.cards$);
      });

    // 更推荐的方式：用async管道，无需手动订阅/取消订阅
    // this.cards$ = this.UserService.userCreatures$;
  }

  ngOnDestroy(): void {
    // 通知取消所有订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

额外优化建议 #

• 用Angular HttpClient替代axios：HttpClient是Angular官方提供的HTTP客户端，原生支持RxJS，无需额外引入axios，代码更契合Angular生态。
• 使用async管道：在模板中直接用*ngFor="let card of cards$ | async"，可以自动处理订阅和取消订阅，避免手动订阅带来的内存泄漏问题。
• 类型定义：给Subject和Observable添加具体类型（比如Subject<Creature[]>），提升代码可读性和类型安全性。

内容的提问来源于stack exchange，提问作者Mathieu Barco