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>

Answer 1

如果你想让它填满它所在的容器，用 relative position 将它包裹在一个 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>

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>

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