当我有很多图表时，在页面中加载一个图表后隐藏微调框

Question

我的页面上有很多图表，地图和表格。每个图表中都有一个加载微调器。在加载最后一个图表之后，所有微调器都同时停止。每个图表加载完毕后，我需要微调器分别停止。

loader.component.html

<div id="loader" [ngClass]="{'visible': loading }">
    <div id="inner-loader"></div>
</div>

loader.component.ts

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'page-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
  _loading: any;
  @Input() heightDocumentSelector: number;
  @Input()
  set loading(value) {
    if (value != undefined) {
      this._loading = value;
      this.changeLoader(value);
    }
  }
  get loading() { return this._loading;}
  constructor() { }

  ngOnInit() {

  }

  changeLoader(switcher): void {
    let loaderSelector = (document.querySelector('#loader') as HTMLElement);
    if (loaderSelector && this.heightDocumentSelector) {
      loaderSelector.style.height = "" + this.heightDocumentSelector + "px";
    }
  }
}

charts.component.html

<div class="row">
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 pr-1 pl-1 d-flex align-items-stretch hidePie">
    <page-loader [loading]="loading" [heightDocumentSelector]="heightDocumentSelector"></page-loader>
    <app-piechart-grouped-by-opened-email (isLoadedChange)="onIsLoadedChange()" (stageFilter)="filterByOpenedEmail($event)" class="card box-shadow-none" [pieChartData]="chartPieIsOpened"></app-piechart-grouped-by-opened-email>
  </div>
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 pr-1 pl-1 d-flex align-items-stretch hidePie">
    <page-loader [loading]="loading" [heightDocumentSelector]="heightDocumentSelector"></page-loader>
    <app-piechart-grouped-by-device-type (isLoadedChange)="onIsLoadedChange()" (isFilterApply)="isFilterApply($event)" (stageFilter)='filterByDeviceType($event)' [pieChartData]='chartByDeviceType' class="card box-shadow-none"></app-piechart-grouped-by-device-type>
  </div>
  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 pr-1 pl-1 d-flex align-items-stretch hidePie" [ngClass]="{'visible': pieDiv }">
    <page-loader [loading]="loading" [heightDocumentSelector]="heightDocumentSelector"></page-loader>
    <app-piechart-grouped-by-device (isFilterApply)="isFilterApply($event)" (stageFilter)='filterByDevice($event)' [pieChartData]='chartByDevice' (isLoadedChange)=onIsLoadedChange($event) class="card box-shadow-none"></app-piechart-grouped-by-device>
  </div>
</div>