Angular - 如何从我的服务组件中的订阅返回布尔值？

Question

我有一个 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 文件中显示错误？ 谢谢

Answer 1

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>

Answer 2

正如许多人建议的那样，我应该在我的服务中使其成为可观察的，并从我的组件中订阅它，我不想这样做，因为我还需要更改其他内容，但如果这是最干净的方式我只是可能会这样做。

这样做有意义吗，所以它都返回一个布尔值，如果用户有效，它将触发 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() 值。