Angular - 页面重新加载后，来自 sharedService 的 BehaviorSubject 在组件中为空

Question

我正在创建一个 Angular 9 应用程序。我有一个共享服务，用于在我的组件之间共享用户数据。在我重新加载应用程序之前它工作正常。

我的 sharedService 称为 UserService。该服务设置 BehaviorSubject 的值。在登录时，它调用方法 setLoggedInUser() 从 JWT 获取用户 ID，该用户 ID 存储在 AuthenticationService 中的另一个 BehaviorSubject 中。然后通过 HTTP 调用请求用户的数据。该值设置为 loggedInUser：

export class UserService {

  public loggedInUser: BehaviorSubject<User> = new BehaviorSubject<User>(null);

  constructor(private http: HttpClient, private authenticationService: AuthenticationService) {
    this.setLoggedInUser();
  }

  async setLoggedInUser() {
    const userID: string = await this.authenticationService.userID.pipe(take(1)).toPromise();
    const user: User = await this.getUserByID(userID).pipe(take(1)).toPromise();
    this.loggedInUser.next(user);
  }

  getUserByID(id: string): Observable<User> {
    return this.http.get<User>(`${this.baseUrl}/${id}`);
  }
}

在我的组件中，我在 init 上调用用户数据：

ngOnInit() {
   this.userService.loggedInUser.pipe(take(1)).subscribe(user => {
    console.log(user);
   });
}

在重新加载 UserService 的构造函数时调用 setLoggedInUser() 方法来获取用户。正确接收了用户 ID 和用户数据，但是在从 setLoggedInUserthis.loggedInUser.next(user) 之前调用了组件中的 ngOnInit 方法/em>。这就是我在组件中收到 null 的原因。

我还尝试从我的 app.component 调用 setLoggedInUser()，而不是从 UserService 的构造函数调用它：

export class AppComponent implements OnInit {

  constructor(private userService: UserService) { }

  async ngOnInit() {
    await this.userService.setLoggedInUser();
    const user = await this.UserService.loggedInUser.toPromise();
    console.log(user);
  }

}

但这也显示了我 null。还是和以前一样的问题。

我尝试的另一种没有效果的方法是将 BehaviourSubject 作为 Observable 传递，如此处所述： Behaviour subject value is empty when trying to fetch from a second component

Answer 1

您似乎想从loggedInUser 获取一个值（因此您使用take(1)），但是当您重新加载应用程序时，您获得的第一个值是您用于初始化BehaviorSubject 的值。

要等到用户被定义后再获取，您可以像这样添加filter 运算符：

this.userService.loggedInUser
  .pipe(
    filter(user => user !== null),
    take(1)
  ).subscribe(user => {
    console.log(user);
   });

Answer 2

我怀疑这是因为您使用的是 BehaviourSubject。 BehaviorSubject 具有存储“当前”值的特性。这意味着您始终可以直接从 BehaviorSubject 中获取最后发出的值。

你用public loggedInUser: BehaviorSubject<User> = new BehaviorSubject<User>(null);初始化服务

用 null 值初始化它后，当你在它上面调用 subscribe 时，它会立即发出最后一个值。在您的情况下，它是 null，这就是您在 this.loggedInUser.next(user) 之前收到发射的原因。

解决方案

如果您的意图不是获取最后存储的值，则使用 subject（而不是使用 BehaviourSubject）。

或

我不确定，但是使用 BehaviourSubject，您可以保留 behaviourSubject 构造函数 empty 而不是 null 和检查它是否给你预期的结果。