Приложение Angular 5 не работает должным образом на Angular 6 - PullRequest
0 голосов
/ 10 апреля 2019

У меня есть этот метод, который отлично работает в моем приложении Angular 5:

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);
    }      
} 

Как вы можете видеть, это вызовет метод класса userService с именем register, который определен следующим образом:

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);
} 

Что ж, теперь я хочу запустить тот же код в моем новом приложении Angular 6.Проблема в том, что приведенный выше код не работает, и есть некоторые проблемы с map и catch методом.Я прочитал несколько похожих ответов, и они предложили использовать метод pipe.Я попробовал следующее, но это не работает, как я ожидал.Он успешно вызывает post API на сервере, но, похоже, this.router.navigate(['/login'] никогда не будет работать.Не могли бы вы помочь мне, как я могу правильно использовать эквивалент Angular 6 для метода map здесь?

Версия Angular 6:

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);
    }

И:

 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 ));
  }

1 Ответ

1 голос
/ 10 апреля 2019

Просто так?

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

И подпись метода должна быть Observable<boolean> или Observable<true>.Однако я не понимаю, зачем вам возвращать boolean здесь.

Обновление: я бы написал метод

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

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

А для вызывающей стороны:

      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
      );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...