getValue из BehaviorSubject в Angular компоненте

Question

Я хочу попытаться провести сравнение в моем компоненте, используя if (success) displayMessage или redirectToPage в течение 3 секунд. Но как я могу проверить это * (this.link $ .source.value.success) или (this.link $ .getValue ()) *, если отправлено значение NULL. Я пытаюсь отобразить в моем браузере консоли this.link $, это отображение BehaivorSubject. Я пытаюсь с методом getValue () это не работает. Не могли бы вы помочь мне.

Еще раз спасибо

Browser console.log

Service.ts

  private objectRes: BehaviorSubject<ResModel>;
  public activationOrResetResponse: Observable<ResModel>

  constructor(
    public _apiService: ApiService,
  ) {
    super(_apiService);

    this.objectRes = new BehaviorSubject(null) as BehaviorSubject<ResModel>;
    this.activationOrResetResponse = this.objectRes.asObservable();
  }

  public activateOrResetAccount(token: string, typeRoute: string): void {
    this._apiService.get(this.type + "/" + typeRoute + "/" + token).subscribe(
      (res) => {
        this.activationOrReset = res;
        this.objectRes.next(this.activationOrReset);
      },
      (error) => {
        this.activationOrReset = error;
        this.objectRes.next(this.activationOrReset);
      }
    );
  }

Component.ts

  public link$: Observable<ResModel>;
  constructor(
    private _authUserService: AuthUserService,
    private _activeRoute: ActivatedRoute,
  ) {}

  ngOnInit(): void {
    this.getActivationPage();
  }

  public getActivationPage(): void {
    this.link$ = this._authUserService.activationOrResetResponse;
    this._authUserService.activateOrResetAccount(
      this._activeRoute.snapshot.params.token,
      "confirmation"
    );
    console.log("link$: ", this.link$.getValue());   // null ???????
  }

Answer 1

Я думаю, что вы получаете свое первоначальное значение и должны пропустить его, пока не получите ответ от вашего сервера.

public getActivationPage(): void {
  this.link$ = this._authUserService.activationOrResetResponse;
  this._authUserService.activateOrResetAccount(
    this._activeRoute.snapshot.params.token,
    "confirmation"
  );

  this.link$
  .pipe( 
     skipWhile((value) => !value), // skip null values
     take(1) // if you need the value only once
  )
  .subscribe((res) => console.log(res));  // { "sucess": false, "message": "Bad action link!" }

Answer 2

value геттер является частью BehaviorSubject(), а не соответствующей наблюдаемой. Поэтому вам нужно назначить BehaviorSubject() вместо наблюдаемого, чтобы использовать его. Попробуйте следующее

public getActivationPage(): void {
  this.link$ = this._authUserService.objectRes;  // <-- assign the `BehaviorSubject`
  this._authUserService.activateOrResetAccount(
    this._activeRoute.snapshot.params.token,
    "confirmation"
  );
  console.log("link$: ", this.link$.value);   // `value` instead of `getValue()`
}

И оно не будет работать, потому что переменная является закрытой в службе.

Я бы добавил, что это выглядит не очень элегантно. Теперь есть две ненужные копии BehaviorSubject. Лучше было бы написать геттер в сервисе. Переменная link$ выглядит мне избыточной.

Сервис

private objectRes: BehaviorSubject<ResModel>;
public activationOrResetResponse: Observable<ResModel>

constructor(public _apiService: ApiService) {
  super(_apiService);

  this.objectRes = new BehaviorSubject(null) as BehaviorSubject<ResModel>;
  this.activationOrResetResponse = this.objectRes.asObservable();
}

get activationValue(): ResModel {
  return this.objectRes.value;
}

Компонент

  public getActivationPage(): void {
    this._authUserService.activateOrResetAccount(
      this._activeRoute.snapshot.params.token,
      "confirmation"
    );
    console.log("link$: ", this._authUserService.activationValue());
  }

Обновление

Правильно было бы сделать следующее

Компонент

  ngOnit() {
    this.getActivationPage();
    this._authUserService.activationOrResetResponse.subscribe(
      response => { console.log(response); }
    );
  }

  public getActivationPage(): void {
    this._authUserService.activateOrResetAccount(
      this._activeRoute.snapshot.params.token,
      "confirmation"
    );
  }