Ngx旋转器正在使用Angular阻止整个页面

Question

我使用Angular在我的应用程序中实现了ngx-spinner，但问题是我需要它加载到页面的特定区域，但它会阻塞整个页面。我在下面解释我的代码。

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

在这里，我需要加载<div class="content" style="margin-top: 55px;"></div>内部的微调器，这意味着这个div内的内容将被阻塞，但它会阻塞整个屏幕。请帮我解决这个问题。

Answer 1

我按照你的描述创建了一个stackblitz示例，我发现可能只是输入是错误的？

我发现文档中有这样的配置。https://github.com/Napster2210/ngx-spinner只需将fullScreen设置为false，就可以避免旋转框覆盖整个页面。

Fullscreen Mode(Enable/Disable)

这是我的部分模板代码。

    <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>

示例：https://stackblitz.com/edit/angular-wbcrve?file=src/app/app.component.html