ngx-loading在黑色屏幕中添加标签

Question

我使用 ngx-loading 并且工作得非常好。

any.component.html

<div class="my-container">
    <ngx-loading [show]="loading" [config]="{ 
      backdropBorderRadius: '14px', 
      backdropBackgroundColour: 'rgba(0,0,0,0.87)',
      fullScreenBackdrop: 'true'
      }">
    </ngx-loading>
</div>

我想知道是否可以在黑屏中添加标签。如下图所示：

Answer 1

只需在标签上设置z-index就可以非常轻松地完成此操作，就像它将显示在黑屏前面一样。

.text {
  z-index: 2000;
  position: absolute;
  color: white;
  left: 0;
  right: 0;
  text-align: center;
  top: calc(50% + 40px);
}

<div class="my-container">
    <ngx-loading [show]="true" [config]="{ 
      backdropBorderRadius: '14px', 
      backdropBackgroundColour: 'rgba(0,0,0,0.87)',
      fullScreenBackdrop: 'true'
      }">
    </ngx-loading>

    <span class="text">Here is some text</span>
</div>

这是StackBlitz演示：https://stackblitz.com/edit/angular-7wwp3m?file=src%2Fapp%2Fapp.component.html

Answer 2

我认为此组件不支持其文档中的文本。你能做的是

<div class="spinner" *ngIf="spinnning">add some text</div>

show / hide由spinning控制，或者是从您的微调器服务传递的变量。

微调器的样式由类spinner控制。您可以在互联网上找到大量的微调器实现。防爆。 https://www.w3schools.com/howto/howto_css_loader.asp