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返回错误，现在，如何在登录组件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

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

这样做是有意义的，所以它都返回一个布尔值，并且如果User有效，它将对存储当前用户的behaviourSubject触发next（）吗？

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()的值。

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

2 个答案: