在等待数据时显示加载组件

Question

我在等待数据显示时如何显示微调器？

有没有办法在我正在等待数据的HTML模板中放置自定义标记（来自微调器组件）？

我的项目基于Angular Drupal POC

我的文章列表组件如下所示：

4

Answer 1

  

我在等待数据显示时是否显示微调器？

将微调器组件绑定到控制器上的某个loading属性，例如

search() {
    this.loading = true;
    this.sub = this.nodeService.getNodes({ q: this.q })
      .subscribe(
        res => {
          this.loading = false;
          this.nodes = this.filteredNodes = res;
          this.totalItems = this.nodes.length;
        }
    );
  }

Answer 2

尝试这样的事情：

search() {
  this.isNodeLoading = true;
  this.sub = this.nodeService.getNodes({ q: this.q })
   .subscribe(
     res => {
        this.isNodeLoading = false;
        this.nodes = this.filteredNodes = res;
        this.totalItems = this.nodes.length;
     }
  );
}

并初步定义isNodeLoading: boolean= false;

然后在模板中使用：

<div class="loader-inner ball-clip-rotate" *ngIf="isNodeLoading">
       <div></div>
</div>

希望这会对你有所帮助。