Angular 8-仅在组件内显示加载微调器

Question

我正在建立一个SPA，其主页将包含多个组件。我希望每个组件都有一个加载微调器，没有覆盖层，仅在组件内显示。

我已经实现了ng-http-loader 6.0.1，但是它创建了一个叠加层，并且微调框显示在整个页面上。我没有找到任何迫使它停留在该特定组件内的选项。

如果没有，最好的方法是什么？硬编码微调框，当http请求返回结果时，用结果替换微调框吗？我认为必须有一种更好的方法。

使用http的示例@angular/common/http HttpClient调用：

private startHttpRequest = () => {
this.http.get('/TestUrl/')
  .subscribe(res => {
    console.log(res);
  });

}

我正在使用SignalR来显示和更新结果

Answer 1

以下是实现组件级微调器的简单方法：

1. 创建一个名为“ Spinner ”的小组件。

2. 将微调框包含在发出Web服务请求的组件中

3. 使用以下命令控制Spinner组件的可见性 隐藏或显示

Answer 2

您可以使用材料的进度：

https://material.angular.io/components/progress-spinner/overview https://material.angular.io/components/progress-bar/overview

在app.component中具有自己的CSS样式：

 <div class="loading-overlay" *ngIf="loading">
  <mat-progress-bar mode="indeterminate" value="40" color="accent"></mat-progress-bar>
</div>

默认情况下，实质性进度不会覆盖页面，如果需要，您需要创建一个CSS类

Answer 3

加载微调器只是CSS，大多数软件包都假定您希望覆盖整个屏幕。最好的办法是为所述微调器创建自己的CSS，然后在组件中执行类似...

<div *ngIf="myLogic === true" class="mycssspinner">
    <span class="spinner">Loading...</span>
</div>

然后在样式表中定义mycsssponner。在线(example from first google result)上有许多纯CSS微调器的示例。您可以使用组件来执行此操作，但这是实现所需目标的最轻量级，最易于重用的方法。