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

Question

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

我目前将其设置为可以在屏幕上正常显示加载图标的位置，我只是想知道我需要做什么才能让用户无法编辑 DOM。

现在我只有一个绑定(bind)到 *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 ID 标记添加到根 CSS 文件 (styles.css)。这样我就可以在我的应用程序的任何地方引用 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";
    }
}