Angular Service中自定义UIKit Modal后如何使用.then函数

问题核心是你当前的confirm方法返回void，且只提取了UIKit modal的.dialog部分，而原生uikit.modal.confirm()返回的是一个Promise对象——这才是能链式调用.then()的关键。要保留该功能，只需让你的自定义方法返回Promise即可。

修改后的代码 #

export class ToasterConfirmService{
    constructor() {}

    // 将返回类型改为Promise<boolean>，匹配UIKit原生confirm的返回值
    confirm(msg: string): Promise<boolean> {
        localStorage.setItem('YesNo','open');

        // 保存UIKit返回的完整modal实例（包含Promise）
        const modalInstance = uikit.modal.confirm(msg);
        const modal = modalInstance.dialog;

        if(modal && modal.$el)
        {
            // 你的所有自定义UI逻辑，保持不变
            if(modal.$el.firstElementChild)
            {
                modal.$el.firstElementChild.classList.add(centerAlign);
                modal.$el.firstElementChild.style.fontSize = mediumFontSize;
                modal.$el.firstElementChild.style.background = notificationsBackgroundColorCode;
                modal.$el.firstElementChild.style.color = styleWhiteColor;
            }

            if(modal.$el.getElementsByClassName(UIkitModalFooter) && modal.$el.getElementsByClassName(UIkitModalFooter).length > 0)
            {
                modal.$el.getElementsByClassName(UIkitModalFooter)[0].classList.remove(textAlignRight);
                modal.$el.getElementsByClassName(UIkitModalFooter)[0].classList.add(textAlignCenter);
                modal.$el.getElementsByClassName(UIkitModalFooter)[0].style.background = notificationsBackgroundColorCode;
                modal.$el.getElementsByClassName(UIkitModalFooter)[0].style.color = styleWhiteColor;
            }
            if(modal.$el.getElementsByClassName(UIkitModalClose) && modal.$el.getElementsByClassName(UIkitModalClose).length > 0)
            {
                modal.$el.getElementsByClassName(UIkitModalClose)[0].style.fontSize = mediumFontSize;
                modal.$el.getElementsByClassName(UIkitModalClose)[0].style.background = styleWhiteColor;
                modal.$el.getElementsByClassName(UIkitModalClose)[0].style.color = styleBlackColor;
                modal.$el.getElementsByClassName(UIkitModalClose)[0].classList.add(centerAlign);
                modal.$el.getElementsByClassName(UIkitModalClose)[0].innerHTML='No';
            }
            if(modal.$el.getElementsByClassName(UIKitConfirmOK) && modal.$el.getElementsByClassName(UIKitConfirmOK).length > 0)
            {
                modal.$el.getElementsByClassName(UIKitConfirmOK)[0].style.fontSize = mediumFontSize;
                modal.$el.getElementsByClassName(UIKitConfirmOK)[0].style.background = styleWhiteColor;
                modal.$el.getElementsByClassName(UIKitConfirmOK)[0].style.color = styleBlackColor;
                modal.$el.getElementsByClassName(UIKitConfirmOK)[0].classList.add(centerAlign);
                modal.$el.getElementsByClassName(UIKitConfirmOK)[0].innerHTML='Yes';
            }         
        }

        // 返回原生Promise，支持.then/.catch链式调用
        return modalInstance;
    }
}

使用方式 #

调用时即可像原生confirm一样使用.then()和.catch()：

const toasterService = new ToasterConfirmService();
toasterService.confirm("确认执行此操作？")
    .then(() => {
        // 用户点击「Yes」后的逻辑
        console.log("用户确认操作");
    })
    .catch(() => {
        // 用户点击「No」或关闭弹窗后的逻辑
        console.log("用户取消操作");
    });

关键改动说明 #

1. 返回类型调整：将confirm方法的返回值从void改为Promise<boolean>，和UIKit原生方法的返回类型对齐
2. 保存完整实例：不再只提取.dialog，而是保留uikit.modal.confirm()返回的完整实例（该实例本身就是Promise）
3. 返回Promise：自定义UI完成后返回该实例，让外部能继续使用链式调用

如果你需要更精细的控制（比如自定义按钮事件逻辑），也可以手动封装Promise监听按钮点击，但上述方法复用UIKit原生逻辑，更简洁可靠。

内容的提问来源于stack exchange，提问作者Madhes