Angular - 如何在加载和保存时禁用/灰显屏幕

Question

我没有找到与Angular特别相关的内容，但有没有办法在按钮点击时灰显/禁用屏幕？现在我有一个按钮来保存一些数据，但我需要显示一个加载图标，并且不允许用户在保存过程中编辑任何其他字段。

我现在把它设置为我可以在屏幕上显示加载图标的地方，我只是想知道我需要做什么，以便用户无法编辑DOM。

现在我只有一个与* ngIf相关联的微调器，它显示在我的页面顶部。

HTML：

<div id="nav">
    <button type="submit"
            class="btn btn-primary"
            style="height: 46px;
            width: 188px;
            margin: 0 auto;
            display:block;"
            (click)="saveHandler()">
        Save & Calculate
    </button>
</div>

<span id="nav" *ngIf="saveInProgress">
    <div class="submit-spinner" style="margin-top: 20px; display:block">
    </div>
</span>

Answer 1

您可以将以下css属性添加到#nav（使用div而不是span）。这应该有效，因为它会在您的网站内容上创建叠加层，以便无法访问内容：

#nav {
    background: #e9e9e9;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

此外，如果您在jsfiddle，stackblitz等网站上提供一个工作示例，那将非常有用，这样我们就可以了解您正在尝试完成的工作。

更新：此外，将此div设为“导航”以外的“id”，以便css在您的内容和叠加层之间不会发生冲突。

Answer 2

我最终做的只是在根CSS文件（styles.css）中添加一个新的CSS ID标签。通过这种方式，我可以从应用程序的任何位置引用ID标记，以便将其应用于项目中的任何内容。

我使用变量驱动CSS元素的切换，这样我就可以执行逻辑以切换灰色/禁用。灰色/禁用在按钮单击时开始，并在从数据库完成保存时结束。用户无法编辑屏幕上的任何字段，并且在修改任何其他字段之前必须等待完成保存。

这是帮助我实现这一目标的文档：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay

这是我在根项目级别添加到styles.css的内容：

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}  

这是我的组件的HTML，我应用了样式（我在HTML文件的底部添加了这个）：

<div id="overlay">
    <span id="nav" *ngIf="saveInProgress">
        <div class="spinner" style="display: block; position: fixed">
        </div>
    </span>
    <span id="nav" *ngIf="saveInProgress">
        <div class="submit-message" style="display: block; color: #FFFFFF; position: fixed; left: 49.7%; top: 54.5%;">
            Saving...
        </div>
    </span>
</div>

这是我在相应TS组件中的逻辑：

save(): Observable<any> {
    if(...) {
        this.saveInProgress = true;     
        document.getElementById("overlay").style.display = "block";
    }
    ....some more logic....
    if(...){
        this.saveInProgress = false;
        document.getElementById("overlay").style.display = "none";
    }
}