ngx-loading 在黑屏中添加标签答案

【问题标题】：ngx-loading add label in black screenngx-loading 在黑屏中添加标签
【发布时间】：2018-06-17 01:34:23
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： css angular typescript angular-cli

【解决方案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

【讨论】：

【解决方案2】：

我认为这个组件不支持他们文档中的文本。你能做的是

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

显示/隐藏由spinning 或从您的微调器服务传递的变量控制。

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

【讨论】：

感谢您的帮助，但在我的项目中，ngx-loading 工作得很好。我之前尝试过微调器，但需要添加其他很多代码才能避免冲突。
但是您可能无法向ngx-loading 添加内容，因为该组件尚未开放供注入。