Javascript 将ng2图表与加载器和AfterViewInit一起使用

我有一个网页，上面有一些图表，现在我正在尝试创建一个非常简单的加载程序：

<div *ngIf="loading === true; else elseBlock" class="container">
  <div class="grid-pulse la-3x">
  </div>
</div>
<ng-template #elseBlock>
  <ng-content></ng-content>
</ng-template>  

它仅在标记为true时在组件和加载程序之间交换，而在标记为false时在组件之间交换

现在，我实现了如下一些图表：

<app-loader [loading]="loading">
  <canvas
    baseChart
    #canvas
    [labels]="chartLabels"
    [datasets]="chartData"
    [options]="chartOptions"
    [chartType]="chartType">
  </canvas>
</app-loader>

工作正常时，我的

加载

变量取决于我执行的

http

请求，然后我将变量更改为

false

，因此出现我的

图表

问题是，当我将变量更改为false时，它开始装载组件，但我已经停止显示加载程序。。。。因此，当图表出现时，我看到一个空白

因此，问题是： 如何检查图表是否已安装和创建？因为我不想显示空白（在组件开始渲染时，我会在顶部显示一个假加载程序，有没有关于如何实现的想法？）

---

我了解到实现这一点的方法是使用

AfterViewInit

，但我可以使用非我创建的组件访问该信息吗（在本例中）

我能想到的唯一逻辑原因是-在数据实际处理并传递到数组之前，您正在将加载变量更改为true，如果您使用的是FACH循环，考虑使用AUTE或一个简单的for循环。

< P> >我唯一可以考虑的逻辑原因是，在数据被实际处理并传递到数组之前，您正在将加载变量更改为true，如果您使用的是FACH循环，则考虑使用AUTE或简单的for循环。< / P>不，数据已经被设置，加载图表需要花费更多的时间，我实际上用固定数据测试了这一点，结果是一样的，当我将标志设置为false时，它正在创建组件，因此它在一小段时间内显示为白色。您有权访问loaderComponent吗？因为在你的最后一句话中，你说了一些让我怀疑的话。是的@Yosy，正如我在我的问题上所写的，加载程序是我做的，这就是为什么我可以分享代码的原因，只是

ngIf

和

else

块为了显示

ng内容

考虑在LoaderComponent内部使用ngAfterViewInit，并将另一个布尔变量更改为true，然后使用它显示画布？不，数据已经设置，加载需要更多秒的是图表，实际上，我用固定数据测试了它，结果是一样的，当我将标志设置为false时，它正在创建组件，因此它在一小段时间内显示为白色。您有权访问loaderComponent吗？因为在你的最后一句话中，你说了一些让我怀疑的话。是的@Yosy，正如我在我的问题上所写的，加载程序是我做的，这就是为什么我可以分享代码的原因，仅仅是

ngIf

和

else

块为了显示

ng内容

是否考虑在LoaderComponent内部使用ngAfterViewInit，并将不同的布尔变量更改为true，然后使用它来显示画布？

<app-loader [loading]="loading">
  <canvas
    baseChart
    #canvas
    [labels]="chartLabels"
    [datasets]="chartData"
    [options]="chartOptions"
    [chartType]="chartType">
  </canvas>
</app-loader>

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

@Component({
  selector: 'my-component',
  // ... the other stuff, scss, html
})
export class MyComponent implements OnInit {

  loading = true;
  // more
  // data
  // ....

  ngOnInit(){
    this.httpService.get('/something').subscribe(data => {
      //do something with the data
      this.loading = false; //set loader to false.
    });
  }


}