Автосервис Angular 2 с Rxjs

Question

У меня есть компонент формы входа, который имеет следующее:

login.component.ts

ngOnInit() {
    this.authenticationService.loginAttempt
        .subscribe(() => this.onSuccess(), err => this.onError(err));
}

login(credentials) {
    this.authenticationService.attempt(credentials);
}

Моя служба аутентификации в настоящее время выглядит так:

authentication.service.ts

class AuthenticationService {
    loginAttempt = new Observable<>();
    credentials = new Subject<Credentials>();

    constructor(private userService: UserService) {
        this.loginAttempt = this.credentials
            .flatMap(credentials => this.makeLoginRequest(credentials);
    }

    attempt(credentials: Credentials) {
        this.credentials.next(credentials);
    }

    private makeLoginRequest(credentials) {
        return this.userService.getTokens(credentials.email, credentials.password);
    }
}

Проблема, с которой я сталкиваюсь, заключается в том, что если попытка входа не удалась, я могу вызвать onError функция на login.component для отображения сообщения об ошибке, но затем последующие попытки входа в систему больше не вызывают запрос входа в систему, потому что loginAttempt была ошибка.

Как я могу поймать ошибку в login.component чтобы я мог отобразить ошибку, в то же время допуская повторные попытки?

Редактировать:

Этот вопрос предлагает использовать retry или же retryWhen, но я не уверен, как включить это на основе того, когда пользователь снова нажимает кнопку входа в систему. Как я могу это сделать (если это правильный подход)?

Answer 1

Что вы делаете, вы загружаете его на ngOnit, поэтому вы загружаете его при загрузке страницы.

После этого вы никогда не перезагрузите его снова. Таким образом, успех остается успехом, а ошибка остается ошибкой.

Поставьте сервисный вызов за кнопкой вызова, и все готово.

редактировать

Изменить:

ngOnInit() {
  this.authenticationService.loginAttempt
    .subscribe(() => this.onSuccess(), err => this.onError(err));
}

В:

buttonClicked() {
  this.authenticationService.loginAttempt
    .subscribe(() => 
      this.onSuccess(), 
      err => this.onError(err)
      );
}