Angular Typescript - 等待弹出对话框中的值

Question

我有一个 html 按钮，当按下该按钮时，会调用一个函数，该函数将“显示”布尔值设置为 true，这会显示一个弹出对话框，用户可以在其中从名称列表中选择一个名称。选择名称会将“selectedName”变量设置为所选名称。

这是我的问题 - 我最初调用以显示弹出对话框的同一个函数需要对所选名称进行更多处理 - 我想在一个函数调用中完成所有这些。像这样的：

// Called by pressing an HTML button
getSelectedName() {
    display = true; // makes dialog popup appear

    // Wait for user to select a name and press a 'Confirm' button 
    // within the dialog popup

    // Once the user has selected a name, do something with it
    var person: Person;
    person.name = selectedName;
}

弹出对话框有确认/取消按钮——有没有办法让上述函数等待用户点击确认按钮，然后在函数中继续？

Answer 1

您可以创建一个在用户单击确认后解决的承诺，然后仅在该承诺解决后执行您需要的任何工作。

// Called by pressing an HTML button
getSelectedName() {
    display = true; // makes dialog popup appear

    // Create a promise that resolves when button is clicked.
    const buttonPromise = new Promise((resolve) => {
        const button = document.getElementById("my-confirm-button");
        const resolver = () => {
            resolve();
            button.removeEventListener("click", resolver);
        }

        button.addEventListener("click", resolver);
    });
    

    // Once the user has selected a name, do something with it       
    buttonPromise.then(() => {
        var person: Person;
        person.name = selectedName;
    })
}