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

Question

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

我已经实现了 ng-http-loader 6.0.1，但它创建了一个叠加层并且微调器显示在整个页面上。我没有找到任何选项可以强制它保留在该特定组件中。

如果没有，最好的方法是什么？对微调器进行硬编码，当 http 请求 returns 结果时，用结果替换微调器？我认为一定有更好的方法来做到这一点。

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

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

}

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

Answer 1

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

Answer 2

加载微调器很简单 css，大多数包都假定您希望覆盖整个屏幕。你最好的办法是为所述微调器创建你自己的 CSS，然后在你的组件中你可以做类似...

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

然后在样式表中定义 mycsssponner。网上有很多纯 CSS 旋转器的例子 (example from first google result)。你可以用一个组件来做到这一点，但这是实现你想要的最轻量级、最容易重用的方法。

Answer 3

您可以使用 material 的进度：

在 app.component 中使用您自己的 css 样式：

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

默认情况下，material进度不会覆盖页面，如果你想

，你需要创建一个css class

Angular 8 - showing a loading spinner only within the component