如何处理LWC组件中未保存的更改？

Question

我正在尝试在 LWC 组件中实现未保存的更改功能。尝试了各种方法，包括使用 javascript 和 jquery 并尝试在卸载之前触发它，但似乎不起作用。在 HTML 页面上同样有效，但在 LWC 中却不像预期的那样。

我尝试在 util 类中使用以下代码：

const handleUnsavedChangesValidation = (hasModifiedData, updateClicked) => {

    console.log('>>>:::INN::hasModifiedData::', hasModifiedData);
    console.log('>>>:::INN::updateClicked::', updateClicked);

    var modified = hasModifiedData && !updateClicked ? true : false;     
    
    if(modified) {

        addEventListener("beforeunload", (evt) => {

            const unsaved_changes_warning = "Changes you made may not be saved.";
                                   
            evt.returnValue = unsaved_changes_warning;
            
            return unsaved_changes_warning;
        });
    }
    else
    {
          removeEventListener("beforeunload", () => {                 
            
            return true;
        });
    }
}

对输入字段进行任何更改时，我尝试使用这些参数调用以下方法： 处理UnsavedChangesValidation（真，假）

在保存按钮上单击我尝试调用此 handleUnsavedChangesValidation(true, true);

尝试上述方法后，它部分工作正常：

加载时 -> 未显示警报（如预期）

输入更新时 -> 如果按下刷新（警报显示 - 预期）

输入更新时 -> 如果单击选项卡则按下（警报显示 - 预期）

输入更新时 -> 如果单击浏览器后退按钮（无法显示警报）

输入更新时 -> 如果单击更新按钮（它仍然显示警报，说明未保存的更改，然后单击“确定”保存。这也是不期望的。警报不应显示在此处）

保存后 -> 页面刷新时 -> 现在显示警报，这也是意料之外的。

如果我再次单击刷新，它不会显示警报。

我循环并尝试通过静态资源和其他方式找到许多方法来处理这个问题，但在这里无法做任何事情。尝试将空白传递给 unload 的返回值但没有结果。尝试传递 return true 和 return false。然而，当我们单击“保存”时，它似乎会显示警报。

任何人都知道任何替代方案，或者有人可以在这里帮助我。我正在寻找适用于 LWC 实现而不仅仅是 html javascript 的解决方案。

请各位极客帮忙。非常感谢任何帮助。

提前致谢，注意安全。

问候， 拉杰什

Answer 1

一般来说，这种事件监听器通常附加到

window

对象上。当您在没有任何内容的情况下编写它时，它会附加到组件（不会产生事件），您也可以将其附加到

document

。请注意，LWC 框架正在使用他们所谓的“扭曲”，这可能会修改某些本机行为。 话虽这么说，LWC 在 SPA（单页应用程序）中运行，这意味着您永远不会真正离开页面，这解释了为什么您没有收到事件。

过去，Salesforce 提供了一个名为

lightning:unsavedChanges

的 Aura 组件来处理这种情况。 LWC 中似乎

没有任何等效项

。 也许你可以将你的组件包装到 Aura 组件中以使其工作......虽然不理想，但至少应该可以工作。 作为解决方法，我建议在组件处于“草稿”状态时进行视觉更改。

最后有一个

Salesforce的想法

将Aura迁移到LWC，如果你想有一天看到它，我强烈建议你投票:)