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 服务请求的组件中包含 spinner

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