Angular异步场景下服务向组件传值异常：登录后组件无法获取更新用户数据

你的问题出在组件中的currentUser只是服务初始值的快照，没有监听服务中属性的变化。当AuthService里的currentUser更新时，组件的变量不会自动同步，因为它只是初始化时赋值了一次null。

解决步骤：用RxJS BehaviorSubject实现响应式数据共享 #

1. 修改AuthService，将普通属性替换为BehaviorSubject

BehaviorSubject可以保存当前值，并且能通知所有订阅者数据更新，正好适合这种跨组件共享状态的场景。

import { BehaviorSubject } from 'rxjs';

// 替换原来的public currentUser
private currentUserSubject = new BehaviorSubject<User | null>(null);
// 暴露可观察对象给组件订阅
public currentUser$ = this.currentUserSubject.asObservable();

// 可选：保留getter方便直接获取当前值
get currentUser(): User | null {
  return this.currentUserSubject.value;
}

// 修改setAuthentication方法，更新Subject的值
public setAuthentication(userPayload:User, token:string, currentUser: User){
  this.currentUserAuth = userPayload;
  this.currentState = authStatus.Authenticated;
  this.currentUserSubject.next(currentUser); // 这里触发更新通知
  localStorage.setItem('token', token);
  
  return true;
}

2. 组件中订阅更新（两种方式）

方式一：手动订阅（适合需要在组件逻辑中处理数据的场景）

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit, OnDestroy {
  currentUser: User | null = null;
  private userSub!: Subscription;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    // 订阅服务的currentUser$，实时获取更新
    this.userSub = this.authService.currentUser$.subscribe(user => {
      this.currentUser = user;
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.userSub.unsubscribe();
  }
}

方式二：用async管道（模板中直接使用，无需手动订阅）

这种方式更简洁，Angular会自动处理订阅和取消订阅：

组件代码：

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {
  // 直接暴露服务的可观察对象
  currentUser$ = this.authService.currentUser$;

  constructor(private authService: AuthService) {}
}

模板代码：

<!-- 用async管道订阅，并将结果赋值给user变量 -->
<div *ngIf="currentUser$ | async as user">
  欢迎回来，{{ user.username }}
</div>

为什么原来的方法无效？ #

组件初始化时，this.authService.currentUser是null，赋值给组件的currentUser后，两者就变成了独立的变量。后续AuthService更新自己的currentUser时，组件的变量不会自动同步——因为JavaScript中对象赋值是引用传递，但这里初始值是null（基本类型），后续服务赋值新对象时，组件的变量还是指向原来的null，没有关联。

内容的提问来源于stack exchange，提问作者Bayes-T