Angular 如何在调用网络服务时关闭屏幕

Question

我是 Angular 的新手，这看起来是一个简单的问题，但我用谷歌搜索时找不到答案。当我调用网络服务时这需要几秒钟我显示了一个微调器，但我希望所有屏幕都将被禁用（就像一个灰色屏幕 - 就像我在弹出消息中看到的那样）有任何想法吗？当我有多个组件时，我希望它也能工作

Answer 1

您可以尝试创建一些跨越整个页面的透明图像，并在您对其他 Web 服务的调用正在处理时显示它，然后将其隐藏...除了您之外，它还会显示 gif

Answer 2

您可以在网站上放置一个 div 并对其应用以下 CSS。然后您可以使用 *ngIf 切换 if （在请求开始时将其设置为可见并在完成后将其隐藏）：

<div class="disable-background" *ngIf="toggleLayer"></div>

.disable-background{
   position: fixed;
   top: 0;
   left: 0;
   background: #2d2d2d;
   opacity: 0.8;
   z-index: 998;
   height: 100%;
   width: 100%;
}

它的作用是在实际屏幕上方放置一个有点透明的灰色层。

Answer 3

您可以使用 ngx-spinner。这是非常容易实现的。你可以在这里查看 -https://www.npmjs.com/package/ngx-spinner.

Angular 如何在调用网络服务时关闭屏幕

Angular how to disable the screen when calling web service

angular-services

angular