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

Question

这个问题在这里已经有了答案:

How to create a spinner in angular (2 个回答)

关闭 2年前.

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

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

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

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

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

}

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

Answer 1

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

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

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

3. 控制 Spinner 组件的可见性ng-hide 或 ng-show