Как вернуть Promise <string>после того, как пользователь нажмет кнопку «ОК» в модальном окне? - PullRequest
Новая
       6

Как вернуть Promise <string>после того, как пользователь нажмет кнопку «ОК» в модальном окне?

0 голосов
/ 01 мая 2018

Я хочу показать модальное окно, запрашивающее ввод, например: «Ваш новый пароль:», вызывая функцию, возвращающую Promise после того, как пользователь нажимает кнопку «ОК».

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

ChangePassword()
{
 modal.PasswordModal().then(res => {/*set new password*/})
                      .catch(msg => {/*resolve error*/})
}

Код, который вернет Promise и покажет модальное окно с вводом. 

PasswordModal() : Promise<string>
{
 this.PasswordModalVisible = true
 //How to wait for the user to press the "OK" button?
}

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Существует очень простое решение для этого, если вы используете или можете использовать rxjs.

В основном

  1. вы создаете обещание, в котором вы подписываетесь на локально определенную наблюдаемую.
  2. Когда пользователь нажимает кнопку ОК (или отмена), вы можете опубликовать логическое значение для наблюдаемой.
  3. Эта функция подписки получит логическое значение и может затем разрешить или отклонить обещание на основе логического значения.

Вот пример кода: 

import {Subject} from 'rxjs/Subject';

export class ModalClass {

    okOperation$ = new Subject();
    newPassword: string;

    passwordModal() : Promise<string>
    {
        this.PasswordModalVisible = true;

        return new Promise((resolve, reject) => {
            // Wait for the user to press the "OK" or "CANCEL" button?
            this.okOperation$.subscribe((success: boolean) => {
                if (success) {
                    resolve(this.newPassword);
                } else {
                    reject('User clicked cancel');
                }
            });

        });
    }

    okClicked() {
        this.okOperation$.next(true);
    }

    cancelClicked() {
        this.okOperation$.next(false);
    }
}

export class DemoClass {        

    constructor(private modal: ModalClass) {}

    changePassword()
    {
        this.modal
            .passwordModal()
            .then(res => {
                console.log(res); // New Password                   
                /*set new password*/
            })
            .catch(msg => {
                console.log(msg); // User clicked cancel                    
                /*resolve error*/
            });
    }
}
0 голосов
/ 01 мая 2018

Желаемый эффект может быть достигнут в следующей последовательности:

  1. Создатель функции создает объект обещания, который не имеет связанного блока выполнения, что позволяет создавать цепочку обещаний без явного запуска какого-либо процесса выполнения.

  2. Все необходимые настройки выполняются, сохраняется ссылка на этот объект обещания, а также возвращается этот объект обещания в функцию-создатель.

  3. Обработчики событий должны захватывать объект обещания и fulfill и reject в зависимости от ситуации.

...