Question

我在身份验证服务中创建了一个发出用户全部数据的主题。在标题组件中，我订阅了该可观察项。一切都应该正常工作，但不会显示任何数据。这是auth服务中的autoAuth函数。

autoAuthUser() {
      const authInformation = this.getAuthData();
      if (!authInformation) {
        return;
      }
        this.authStatusListener.next(true);
        this.fetchUser(authInformation.userId).subscribe(
          (res) => {
            if (res.user) {
              this.currentUser = res.user;
              this.userListener.next(this.currentUser);
            }
          }
        );
      }
    }

，它在标题组件中：

this.authService.autoAuthUser();
        this.authService.getAuthStatusListener().subscribe((isA) => {
            this.isAuthenticated = isA;
            if (this.isAuthenticated) {
            this.authService.getUserListener().subscribe(
            (user) => {
                this.currentUser = user;
            }
        );
      }

这在标题组件的模板中：

<p class="username">{{currentUser?.username}}</p>

当我用控制台在标头组件中记录当前用户时，我得到了全部正确的数据，但未显示任何内容。

Answer 1

在标头组件中，将this.authService.autoAuthUser();调用移到底部。

这应该有效

this.authService.getUserListener().subscribe((user) => {
    this.currentUser = user;
});

this.authService.getAuthStatusListener().subscribe((isA) => {
    this.isAuthenticated = isA;
});

this.authService.autoAuthUser();

Answer 2

我将按如下方式重新编写authService，但不确定是否同时需要authStatusListener和userListener。如果userLister发送 null ，则可以将身份验证状态设为false。

autoAuthUser() {
  const authInformation = this.getAuthData();
  if (!authInformation) {
    // need to set false if user not found.
    this.authStatusListener.next(false);
    this.userListener.next(null);
    return;
  }
  this.authStatusListener.next(true);
  this.fetchUser(authInformation.userId).subscribe(
    (res) => {
      if (res.user) {
        this.currentUser = res.user;
        this.userListener.next(this.currentUser);
      }
    }
  );
}

并将标头组件更改为

this.authService.autoAuthUser();
this.authService.getAuthStatusListener().subscribe((isA) => {
  this.isAuthenticated = isA;
  if (this.isAuthenticated) {
    this.authService.getUserListener().subscribe(
      (user) => {
        this.currentUser = user;
      }
    );
  }
});

在angular7

2 个答案: