Question

这是我的ajax-loader.component.html

   `<div class="loadingplaceholder" *ngIf="isBusy">
        <label class="ajax-loader">
          <i class="fas fa-circle-notch fa-spin"></i>
          <span class="loading-data-text">Loading</span>
        </label>
    </div>`

我需要将此加载器组件添加到未加载数据的特定区域文件的整个部分。

Answer 1

为此，您需要将.loadingplaceholder absolute和包含父级的父项设置为relative。

.loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

现在，您可以为要在其中显示微调器的元素创建一个类；

.loading-container {
    position: relative
}

要使用它，只需在要显示微调框的元素中添加loading-container类。

<div class="loading-container">
    --------- This is area where I want to show spinner ----------
    <div class="loadingplaceholder" *ngIf="isBusy">
        <label class="ajax-loader">
          <i class="fas fa-circle-notch fa-spin"></i>
          <span class="loading-data-text">Loading</span>
        </label>
    </div>
</div>

因此上述解决方案可以正常工作，但我建议遵循良好做法：

我建议不要使用引导类loading-container。而不是创建position-relative类或内联样式。

在angular中，我们应该为重复的UI创建组件。在您的情况下，您可能想在许多不同的地方使用此加载器。因此，您可以在此处创建一个接受布尔参数可见的组件。

如何将加载器组件附加到角度8中的特定div元素上？

1 个答案: