Angular 5应用程序在Angular 6上无法正常工作

Question

I have this method which is working fine in my Angular 5 application:

registerUser({ value, valid }: { value: UserRegistration, valid: boolean }) {
    this.submitted = true;
    this.isRequesting = true;
    this.errors='';
    if(valid)
    {
        this.userService.register(value.email,value.password,value.firstName,value.lastName,value.location)
                  .finally(() => this.isRequesting = false)
                  .subscribe(
                    result  => {if(result){
                        this.router.navigate(['/login'],{queryParams: {brandNew: true,email:value.email}});                         
                    }},
                    errors =>  this.errors = errors);
    }      
} 

As you can see this will call a method on userService class called register that has defined like this:

register(email: string, password: string, firstName: string, lastName: string,location: string): Observable<UserRegistration> {
    let body = JSON.stringify({ email, password, firstName, lastName,location });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.baseUrl + "/account", body, options)
      .map(res => true)
      .catch(this.handleError);
} 

Well, now I want to run the same code on my new Angular 6 application. The problem is the above code is not running there and there is some problems with map and catch method. I have read some similar answers and they suggested to use pipe method. I have tried the following, but it doesn't work as per my expectation. It successfully calls the post API on the server but it seems the this.router.navigate(['/login'] will never works. Would you please help me how can I use Angular 6 equivalent of the map method here properly?

The Angular 6 version:

registerUser({ value, valid }: { value: UserRegistration, valid: boolean }) 
{
    this.submitted = true;
    this.isRequesting = true;
    this.errors = '';
    if (valid) {
      this.userService.register(value.email, value.password, value.firstName, value.lastName, value.location, value.username)
        .pipe(
        finalize(() => this.isRequesting = false))
        .subscribe(
          result => {
            if (result) {
              this.router.navigate(['/login'], { queryParams: { brandNew: true, email: value.email } });
            }
          },
          errors => this.errors = errors);
    }

And:

 register(email: string, password: string, firstName: string, lastName: string, location: string, username: string): Observable<UserRegistration> {

    let body = JSON.stringify({ email, password, firstName, lastName, location, username });
    let headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    return this.http.post<UserRegistration>(this.baseUrl + "/account", body, { headers: headers }).pipe(
      map(res =>  res ));
  }

Answer 1

Just like that?

return this.http.post<UserRegistration>(this.baseUrl + "/account", body, { headers: headers }).pipe(
      map(res => true));
  }

And the method's signature should be Observable<boolean> or Observable<true> . However, I don't understand why you need to return a boolean here.

Update: I would write the method

register(userRegistration: UserRegistration): Observable<{}> {
    let headers = new HttpHeaders({ 'Content-Type': 'application/json' });

    return this.http.post(this.baseUrl + "/account", userRegistration, { headers });
}

And for the caller:

      this.userService.register(value).pipe(
        finalize(() => this.isRequesting = false)
      )
      .subscribe(
         () => this.router.navigate(['/login'], { queryParams: { brandNew: true, email: value.email } }),
         (error: HttpErrorResponse) => this.errors = xxx(error) // your error handler
      );