尝试订阅我的用户配置文件组件中的行为主题，但我不断收到初始空值

Question

我有一个用户配置文件组件正在尝试订阅我的用户服务中的行为主题。我将行为的初始值设置为 null。当用户注册时，我也在我的注册组件中将值传递给我的用户对象，然后将这些相同的值传递给将它们保存在我的下一个主题中的方法。

虽然当我在我的用户配置文件组件中订阅我的 ngOnIt 时，我只能取回我的初始值。我在这里错过了什么吗？根据我的阅读，我已经检查以确保我没有提供我的用户服务的多个实例，并且我使用了 value、getValue 和 subscribe 来获取该值。全部返回 null。

export class UserProfileComponent implements OnInit {

user: User;

  ngOnInit() {
// My problem.
    this.user = this.userService.getSavedUser().getValue();
    console.log(this.user);
  }

}

// object

export class User {
    firstName: string;
    lastName: string;
    email: string;
    mobile: string;
    uid: string;
    termsOfAgreement: boolean;

    constructor(
        email: string,
        mobile: string,
        firstName: string,
        lastName: string,
        uid: string,
        termsOfAgreement: boolean
    ) {
        this.email = email;
        this.mobile = mobile;
        this.firstName = firstName;
        this.lastName = lastName;
        this.uid = uid;
        this.termsOfAgreement = false;

    }
}

signup.component.ts

onSignup(signupFormData) {
        return this.afAuth.auth.createUserWithEmailAndPassword(signupFormData.value.email, signupFormData.value.password)
            .then(userInfo => {
                // Pass in user info into to user object. 
                const user: User = new User(signupFormData.value.email,
                    signupFormData.value.mobile, signupFormData.value.firstName,
                    signupFormData.value.lastName,
                    userInfo.user.uid, false);
                this.writeNewUser(user);

            }).catch((error) => {
                this.showError = true;
                this.errorMessage = error.message;
            })
    }

    private writeNewUser(user: User): void {
        this.userService.addUser(user);
    }

// user.service.ts

export class UserService {

  private subject: BehaviorSubject<User> = new BehaviorSubject(null);


public addUser(user: User): void {
    this.db
      .collection("users")
      .doc(user.uid)
      .set(Object.assign({}, user));
    this.saveUser(user);
  }

  public saveUser(user: User) {
    this.subject.next(user);
  }

  public getSavedUser(): BehaviorSubject<User> {
    return this.subject;
  }
}

Answer 1

正如您所写，问题出在您的组件中。您没有订阅 Subject 而是尝试在执行 ngOnInit 方法时获取价值。

export class UserProfileComponent implements OnInit {
  user: User;

  ngOnInit() {
    this.userService.getSavedUser().subscribe(
      (value) => {
        this.user = value;
        console.log(this.user);
      }
    );
  }

}

现在您将收到 Subject 发出的每个值，从您订阅它的那一刻开始（以及最后一次发出）

旁注：

最佳实践是返回转换为 Observable 的主题（在您的用户服务中）。当您返回 Subject 时，有人可以使用 next 方法并发出一些值。如果您只想让服务发出新值，则必须返回 this.subject.asObservable()（并更改类型）

旁注 2：

记得在组件的destroy - ngOnDestroy方法上取消订阅Subject