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）。这应该可行，因为它将在您的网站内容上创建一个叠加层，以使该内容不可访问：

<template>
    <div id="container" >
        <div id="header">
            <router-link @click.native="remove(chosenAccount, $event)" to="/summary/" text="summary"><span cursor: pointer;" title="Summary"></span></router-link>
        </div>
        <div id="content" >
            <div id="settings" class="text-center" style="margin-left: -4px;">
                <h3 style="color:#1173BD;"><span v-text="chosenAccount.network_name"></span></h3>
                <!-- OUTPUTS ACCOUNT #2 (CORRECT) IN LOCAL STORAGE-->
                {{chosenAccount}}
                <h4>has been removed</h4>
                <h3>
                    <router-link @click.native="remove(chosenAccount, $event)" to="/summary/" text="summary"><span cursor: pointer;" title="Summary"></span></router-link>
                </h3>
            </div>
        </div>
        <div id="footer" style="text-align:center;">
            <router-link to="/" text="add_new_account"><span aria-hidden="true"> Add New Account</span></router-link>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import {dataGetter} from "@/datagetter/dataGetter";
export default{
    name:"removed",
    mixins:[dataGetter],
    data(){
        return{
        }
    },
    methods:{
        getNewData(){
            this.getData();
        },
        remove(account, event){
            // OUTPUTS ACCOUNT #1 (INCORRECT) IN LOCAL STORAGE
            console.log(account);
        },
    },
    computed:{
        networkName(){
            let account = this.account;
            if( account != undefined){
                return account.network_name;
            }
            return "";
        },
    }
}
</script>

此外，如果您在jsfiddle，stackblitz等网站上提供工作示例，这将非常有帮助，以便我们了解您要完成的工作。

更新：另外，请为该div赋予一个除“ nav”之外的“ 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";
    }
}

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

2 个答案: