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

Question

我有一个 html 按钮，当按下该按钮时，它会调用一个将 'display' 布尔值设置为 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;
}

弹出对话框有 Confirm/Cancel 个按钮 - 是否可以使上述功能等待用户单击“确认”按钮，然后继续执行该功能？

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

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

Angular Typescript - waiting for a value from a popup dialog

html

wait

typescript

angular