将 ng2-charts 与加载器和 AfterViewInit 一起使用

Question

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

<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>  

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoaderComponent {
@Input() loading = 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.
});
}

}

这很完美，我的loading变量取决于我所做的http请求，然后我将变量更改为false，因此出现了我的chart。

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

所以问题是： 如何检查图表是否已挂载并创建？因为我不想显示那个空白(当组件开始渲染时，我会在顶部显示一个假加载器，关于如何完成的任何想法？

我读到以某种方式实现这一目标是用AfterViewInit但是我可以使用不是由我创建的组件访问该信息吗(在这种情况下(

Answer 1

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