После отправки формы перейдите к другому компоненту и покажите сообщение об успехе в Angular

Question

У меня есть компонент, который отправляет данные в службу для сохранения данных в БД. После этого я хочу перенаправить или перейти к другому компоненту и показать там сообщение об успехе. Я реализовал это, но я всегда получаю неправильное значение. Я также не уверен, правильно ли я это реализовал. Любая помощь приветствуется. Вот мой код.

  Component class on submit etc {
    .....
   this.Service.updatePassword(this.neuesPassword);  //this will call the updatepassword  on service
   //after it will navigate to and pass queryParams
   this.router.navigateByUrl('/url',{ queryParams: { response: this.response } });
   }
    //this is the service method that is called 
   public updatePassword(newPass: string) {
    let payload = new HttpParams();
    payload = payload.set('Pass', newPass);
    this.httpClient.post(this.URL_UPDATE_PASSWORD, { newPassword }).subscribe((response: boolean) => {
        this.isSaved = response;           
    });

в компоненте, я хочу показать сообщение, которое у меня есть в методе ngOnInit () {} this

this.route.queryParams.subscribe(params => {
  this._isChanged = params['response'];

});

, и я хочу получить переменную _isChanged ценность ответа. Что-то я делаю не так. Я также посмотрел здесь отправка данных через маршрутизацию путей в angular

но я делаю что-то не так. Любая помощь с этим. спасибо

Answer 1

Проблема заключается в том, что размещение содержимого в БД является задачей Asyn c. В тот момент, когда вы переходите на другой путь, функция обратного вызова для подписки http post еще не была вызвана. Таким образом, в точке навигации this.isSaved не определено.

Попробуйте подождать, пока не будет выполнена функция обратного вызова. Например, перейдите в самой функции обратного вызова.

По моему мнению, есть возможные пути: .post возвращает наблюдаемую, так что вы можете вернуть эту наблюдаемую в updatePassword и подписаться в компоненте.

Служба:

public updatePassword(newPass: string) {
  // [...]
   return this.httpClient.post(this.URL_UPDATE_PASSWORD, { newPassword });
}

Компонент:

// [...]
this.Service.updatePassword(this.neuesPassword).subscribe((response) => {
    this.router.navigateByUrl('/url',{ queryParams: { response: response } });
});

На мой взгляд, лучший способ - преобразовать наблюдаемое в обещание с помощью toPromise, тогда вы можете вернуть это обещать и разрешить это в компоненте.

Служба:

public updatePassword(newPass: string) {
    // [...]
    return this.httpClient.post(this.URL_UPDATE_PASSWORD, { newPassword }).toPromise();
}

Компонент:

// [...]
this.Service.updatePassword(this.neuesPassword).then((response) => {
    this.router.navigateByUrl('/url',{ queryParams: { response: response } });
});

В обоих случаях я бы порекомендовал прочитать об asyn c await, обещаниях и наблюдаемых.