Выдать наблюдаемое значение и обработать его в компоненте

Question

У меня есть метод login() и AuthService. То, что я хочу, это передать значение из метода login() в AuthService для обработки значения в NavbarComponent:

export class AuthService extends AbstractRestService<any> {
    user: AppUser = {id: null}; 

    login(userName: string, password: string) {
        return this.http
            .post('/auth/login')
                .pipe(
                    map(res => {
                    // here I want to emit value of Observable `anUser$` 
                    // to send value to NavbarComponent
                        this.getAppUser(); // I want to throw Observable value to handle its value 
                                           // in NavbarComponent.ts         

                        return true;
                  })
                 , catchError(this.handleError)
            );
    }

    public getAppUser(): Observable<AppUser> {   
        return of(this.user);

    }
}

My NavbarComponent.html выглядит следующим образом:

<li *ngIf="appUser$ | async as anUser">

 {{ anUser?.name }}

</li>

Мой NavbarComponent.ts выглядит следующим образом:

appUser$: Observable<AppUser>;

async ngOnInit() {
    this.appUser$ = this.auth.getAppUser();    
}

Я хочу, чтобы метод login() в AuthService выдавал значение для обработки значения в NavbarComponent, однако значение appUser$ не отображается в NavbarComponent.html.

Не могли бы вы сказать, что я делаю не так?

Answer 1

сделать так:

export class AuthService extends AbstractRestService<any> {
    user: AppUser = {id: null}; 

    login(userName: string, password: string) {
        return this.http
            .post('/auth/login')
                .pipe(
                    map(res => {
                        this.userSource.next(res); // just call next with the user here       

                        return true;
                  })
                 , catchError(this.handleError)
            );
    }

    private userSource = new BehaviorSubject<AppUser>({id: null})
    public getAppUser = this.userSource.asObservbale();
}

Answer 2

Возвращая of(this.user) из метода getUser(), все, что вы делаете, это возвращаете наблюдаемое с одним излучением, которое является значением this.user во время вызова.

Если вы хотите, чтобы поток обновлялся каждый раз, когда пользователь обновляется при входе в систему, тогда лучший способ сделать это - использовать Subject . Субъект - это наблюдаемый объект, выбросы которого могут быть установлены извне.

Возможно, вы захотите использовать специальный субъект под названием BehaviorSubject , который будет выдавать последнее значение, как только оно будет подписано. , Таким образом, если логин уже был вызван после подписки на наблюдаемое, то текущее значение все равно будет возвращено. Это эквивалентно обычной наблюдаемой с startWith и shareReplay оператором.

export class AuthService extends AbstractRestService<any> {
  private readonly userSubject = new BehaviorSubject<{ id: string }>();



  login(userName: string, password: string) {
    return this.http
      .post('/auth/login')
      .pipe(
         tap(res => userSubject.next(res)),
         catchError(this.handleError)
      );
  }

  getAppUser() {
    /** do other work **/
    return this.userSubject.asObservable();
  }
}

Лично я бы просто назначил переменную напрямую, выставив userSubject как поле только для чтения, используя this.userSubject.asObservable(). Поскольку вы указали, что в getAppUser() есть дополнительные логи c, вы можете просто выполнить тот же вызов в методе.