Angular

Question

我有一个 login.service.ts，我的 login.component.ts

在我的登录组件中，我有一个输入字段，用户在其中输入用户名，当他点击 "login" 时，我们检查是否用户名在此调用中有效：

<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 returns 错误，现在，如何在登录组件 html 文件中显示错误？谢谢

Answer 1

一个BehaviorSubject用来存放一个变量。它的工作方式与 Observable 类似，但您可以随时访问其最新值。

async 管道用于呈现来自异步源的值，例如 Observable 或 BehaviorSubject 或 Subject.

注意：与 BehaviorSubject.

不同，Subject 不存储最新值

服务

public error$ = new BehaviorSubject(false);

....

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

组件

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

Answer 2

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

这样做是否有意义，所以它 return 都是布尔值，如果用户有效，它将触发 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)
    );
  }

我这样做对吗？或者我可以改进它吗？在我看来，现在我拥有了我想要的两个东西，一个布尔值 return，如果是现有用户，它将 next() 值。

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

Angular - How to return a bool from a Subscription in my service-component?

subscription