Angular 7 - ngx-spinner覆盖整个页面

Question

我已经在我的Angular 7页面中实现了ngx-spinner，并将全屏设置为false，因为我不希望头部被旋转器的背景颜色覆盖。但是在渲染时它仍然覆盖整个页面。不确定问题出在哪里。

以下是我参考的链接。

https://napster2210.github.io/ngx-spinner/

.alert {
    margin-top: 10px;
    height: 500x;
    position: relative;
    width: 100%;
    /* padding: 15px; */
    bottom: 0%;
    border: 1px solid transparent;
    border-radius: 4px;
    float: left;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

table {
    border-collapse: collapse;
}

.spacing {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.k-tabstrip > .k-content.k-state-active {
    display: none !important;
}

<div style="overflow-x: hidden; overflow-y: hidden;">
  <ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" fullScreen="false">
    <p style="color: white"> Loading... </p>
  </ngx-spinner>
  <div class="form-group row col-md-12" style="margin-top:30px">
    <div class="col-md-1">
      <label for="inputFax" class="col-form-label" style="font-weight: bold;">Eval Date</label>
      <kendo-datepicker style="width: 100% ;float: left;" [format]="'MMMM yyyy'" [topView]="'decade'"
        [bottomView]="'year'" [(ngModel)]="evalDate" (valueChange)="evalDateChanged($event)">
      </kendo-datepicker>
    </div>

    <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
        (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
        EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
  </div>
  <div class="form-group row">
    <div class="panel panel-default col-md-12  ">
      <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
          <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
              All</a></span>
          <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
              All</a></span>
          <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
            [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
            rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
            [frameworkComponents]="frameworkComponents">
          </ag-grid-angular>
        </div>

      </div>
    </div>
  </div>

  <div class="form-group row">
    <div class="panel panel-default col-md-12">
      <div style="height: 100%; width: 100%;" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
        class="alert alert-danger col-md-5">
        <p><strong>The investments made in the following products are not included in this report:</strong></p>
        <table>
          <ng-container *ngFor="let group of AllocationDetails.MissingProducts">
            <tr>
              <th> {{group[0].ProductType}}</th>
            </tr>
            <tr *ngFor="let post of group">
              <td> {{ post.ProductName  }} </td>
            </tr>
            <tr>
              <td class="spacing"></td>
            </tr>
          </ng-container>
        </table>
      </div>
      <div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
        class="col-md-7">
        <app-pie-chart [series]="allocation_series"></app-pie-chart>
      </div>
    </div>
  </div>
</div>

- Tom

---

请看这里讨论相同问题：https://github.com/Napster2210/ngx-spinner/issues/5#issuecomment-450422594 - Kenana Reda

我尝试在包含spinner的div和spinner本身上都应用了class="black-overlay"，但是都没有起作用。 - Tom

尝试使用https://github.com/kuuurt13/ng-block-ui，我使用它，不透明度很棒。 - Gaspar

Answer 1

将其包裹在一个具有相对定位的 div 元素中，如果您想让它填充所在的容器：

<div style="position: relative">
  <ngx-spinner
      bdOpacity = 0.9
      bdColor = "#f4f4f9"
      size = "medium"
      color = "#1010ee"
      type = "ball-clip-rotate"
      [fullScreen] = "false">
  </ngx-spinner>
</div>

- ceebreenk

Answer 2

在您的情况下，您忘记了方括号。 您必须这样做：最初的回答。

<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" [fullScreen]="false">
    <p style="color: white"> Loading... </p>
</ngx-spinner>

- Zuhaib TALAAT

Answer 3

要在布局容器div上显示它，只需在router-outlet之后添加app-spinner标签：

<div class="col content">
    <router-outlet #o="outlet"></router-outlet>
    <div class="complement-box"></div>
    <ngx-spinner bdColor="rgba(0,0,0,0.32)" size="large" color="#8652d5" type="ball-clip-rotate-multiple"
        [fullScreen]="false">
    </ngx-spinner>
</div>

要设置微调器的边框，请在styles.scss文件中设置此样式：

.overlay[_ngcontent-serverApp-c52] {
    border-radius: 43px;
    height: 106% !important;
    margin-top: -1px;
}

- M Komaei