Question

我想显示一个模态窗口，要求输入例如：“你的新密码：”通过在用户点击“确定”按钮后调用返回Promise的函数。

单击按钮更改密码后将调用的代码：

IBarcodeWriter barcodeWriter = new BarcodeWriter
                {
                    Format = BarcodeFormat.QR_CODE,
                    Options = new QrCodeEncodingOptions
                    {
                        Width = 400,
                        Height = 400
                    }


                };

                var result = barcodeWriter.Write(qrcode);
                var barcodeBitmap = new Bitmap(result);
                #region code for text
                //RectangleF rectf = new RectangleF(0, 0, barcodeBitmap.Width, barcodeBitmap.Height);
                //Graphics g = Graphics.FromImage(barcodeBitmap);

                //g.SmoothingMode = SmoothingMode.AntiAlias;
                //g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                //g.PixelOffsetMode = PixelOffsetMode.HighQuality;
                //StringFormat format = new StringFormat()
                //{
                //    Alignment = StringAlignment.Center,
                //    LineAlignment = StringAlignment.Center
                //};
                //// Draw the text onto the image
                //g.DrawString("Vaishali", new Font("Tahoma", 8), Brushes.Red, rectf,format);
                #endregion

                #region code for logo
                System.Drawing.Image logo = System.Drawing.Image.FromFile(Server.MapPath("~/image") + "/logo.png");

                int left = (barcodeBitmap.Width / 2) - (logo.Width / 2);
                int top = (barcodeBitmap.Height / 2) - (logo.Height / 2);

                Graphics g = Graphics.FromImage(barcodeBitmap);

                g.DrawImage(logo, new Point(left, top));
                #endregion
                using (MemoryStream memory = new MemoryStream())
                {
                    using (FileStream fs = new FileStream(barcodePath, FileMode.Create, FileAccess.ReadWrite))
                    {

                        barcodeBitmap.Save(memory, ImageFormat.Jpeg);
                        byte[] bytes = memory.ToArray();
                        fs.Write(bytes, 0, bytes.Length);
                    }
                }

将返回Promise的代码并显示带输入的模态窗口。

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

Answer 1

如果您正在使用或可以使用rxjs，那么有一个非常简单的解决方案。

基本上，

您创建了一个承诺，您订阅了本地定义的observable。
当用户单击“确定”（或取消）时，您可以将布尔值发布到observable。
此订阅函数将接收布尔值，然后可以根据布尔值解析或拒绝承诺。

以下是示例代码：

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

Answer 2

可以按以下顺序实现所需的效果：

函数创建者创建一个没有关联执行块的promise对象，从而允许在不明确启动任何执行过程的情况下创建promise链。
所有必要的设置都会发生，保留一个引用到这个promise对象，并在函数创建者中返回这个promise对象。
事件处理程序应根据需要捕获promise对象fulfill和reject。

用户在模态窗口中单击“确定”按钮后如何返回Promise <string>？

2 个答案: