Angular - Как вернуть bool из подписки в моем сервис-компоненте? - PullRequest
Новая
       7

Angular - Как вернуть bool из подписки в моем сервис-компоненте?

0 голосов
/ 24 апреля 2020

У меня есть login.service.ts и мой login.component.ts

В моем компоненте входа в систему у меня есть поле ввода, где пользователь вводит имя пользователя и когда он нажимает кнопку «войти» , мы проверяем, является ли это имя пользователя действительным с этим вызовом: 

<button color="primary" mat-raised-button (click)="loadUserInfo(email.value)">
      continue
      <mat-icon>arrow_forward</mat-icon>
    </button>

loadUserInfo(userLogin: string) {
this.loginService.processLogin(userLogin);
}

, который вызывает мой сервис: 

processLogin(loginId: string) {
return this.http.get("api/" + loginId).subscribe(
(user: User) => {

        this.userSub.next(user);
      },
      err => {
        console.error("Username not valid");
      }
    );
  }

Я не могу обернуться вокруг следующего: Если вызов неуспешен , и нет пользователя с таким именем, как я могу в моем login.component.ts показать сообщение об ошибке под полем ввода? Мне нужен bool или что-то в этом роде, но обработка ошибок происходит в service component, поэтому я не совсем уверен, как лучше всего

Я бы поставил в поле ввода следующее: 

  <div *ngIf="userNotValid"> Error, this user doesn't exist</div>

Но как лучше всего справиться с этим сценарием? Пользователи нажимают кнопку, API возвращает ошибку, и теперь, как мне показать ошибку в файле login-component html? Спасибо

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

как и предполагали многие, я должен сделать это заметным в своем сервисе и подписаться на него из своего компонента, я не хотел этого делать, так как мне нужно было бы также изменить другие вещи, но если это самый чистый способ Я просто мог бы сделать это.

Будет ли это иметь смысл, делая это так, так что оба возвращают логическое значение, и если пользователь действителен, он запускает next () для моего behaviourSubject, который хранит текущий пользователь? 

processLogin(loginId: string): Observable<boolean> {
    return this.http.get("api/" + loginId).pipe(map(
      (info: UserInfo) => {
        console.log("userinfo:", info);
        return info;
      }),
      catchError(err => of(null as UserInfo))
    ).pipe(tap(
      uInfo => {
        this.userSub.next(uInfo);
      }
    ),
    map(u => u != null)
    );
  }

я делаю это правильно? Или я мог бы улучшить это? На мой взгляд, теперь у меня есть обе вещи, которые я хотел, логическое значение в качестве возврата, а в случае Существующего пользователя это будет next() значение.

0 голосов
/ 24 апреля 2020

A BehaviorSubject используется для хранения переменной. Он работает так же, как Observable, но вы можете получить доступ к его последнему значению в любое время.

Канал async используется для визуализации значений из асинхронных источников, таких как Observable или BehaviorSubject или Subject.

Примечание: Subject не хранит последнее значение в отличие от BehaviorSubject.

Служба 

public error$ = new BehaviorSubject(false);

....

this.error.next(true); // to trigger a new error

Компонент 

<div *ngIf="service.error$ | async">Error<div>
...