Angular使用ngx-spinner如何实现仅遮挡指定局部区域而非全屏

解决方案 #

按以下两步修改即可实现仅遮挡指定区域：

• 将ngx-spinner的[fullScreen]属性值从true改为false。fullScreen设为true时组件会强制铺满整个浏览器视口，设为false后才会基于最近的非static定位父元素进行定位。
• 给你需要遮挡的<div class="content">添加position: relative样式，作为spinner的定位基准，你原先的相对定位加在了错误的父容器上。

修改后的完整代码如下：

<p> Hello name </p>
<div class="content" style="margin-top: 55px; position: relative;">
  <ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)" size = "medium" color = "#fff" type = "square-jelly-box" [fullScreen] = "false">
    <p style="color: white" > Loading... </p>
  </ngx-spinner>
  <cui-modal></cui-modal>
  <router-outlet></router-outlet>
</div>

如果出现spinner被区域内其他元素遮挡的情况，可以给ngx-spinner添加[zIndex]属性调整层级，示例：[zIndex]="99"。

内容的提问来源于stack exchange，提问作者subhra_user