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 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";
    }
}

Answer 2

Вы можете добавить следующее свойство css в #nav (используйте div вместо span). Это должно работать, так как это создаст наложение на контент вашего сайта, так что контент не будет доступен:

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

Кроме того, было бы очень полезно, если бы вы предоставили рабочий пример на веб-сайте, таком как jsfiddle, stackblitz и т. Д., Чтобы мы могли взглянуть на то, чего вы пытаетесь достичь.

Обновление: Кроме того, присвойте этому div'у 'id', отличный от 'nav', чтобы css не конфликтовал между вашим контентом и оверлеем.