如何有效地检查 Angular 2 中加载的数据？成分？

Question

在Angular中，我在我的每个组件中进行以下操作，这些组件与API通信：

export class ExampleComponent implements OnInit {

    public datasLoaded: boolean = false;

    private datasALoaded: boolean = false;
    private datasBLoaded: boolean = false;
    private datasCLoaded: boolean = false;

    constructor(private api: MyAPIService) { }

    ngOnInit(): void {
        fetchDatas();
    }

    fetchDatas() {
        this.api.getDatasA().subscribe({
            next: datas => {
                this.datasALoaded = true;
                this.checkDatasLoaded();
            }
        });

        this.api.getDatasB().subscribe({
            next: datas => {
                this.datasBLoaded = true;
                this.checkDatasLoaded();
            }
        });

        this.api.getDatasC().subscribe({
            next: datas => {
                this.datasCLoaded = true;
                this.checkDatasLoaded();
            }
        });
    }

    private checkDatasLoaded() {
        this.datasLoaded = this.datasALoaded && this.datasBLoaded && this.datasCLoaded;
    }
}

我对代表其状态的每个请求都有一个变量（是否加载）。和模板中使用的公共变量datasloaded仅在加载所有内容时才汇总所有请求的状态并显示内容：

<div *ngIf="datasLoaded"></div>

这很好，但是为每个组件写作很痛苦。显然，每个组件都是不同的，不是相同的请求，而不是相同数量的请求，而在加载数据或不加载数据时的行为不是相同的行为，但是我正在寻找更容易编写的解决方案。

您如何处理这种情况？

Answer 1

您将不会克服“数据载”标志，但是您可以尝试缩短代码，甚至可以用forkjoin作为实用程序进行操作。

forkJoin({
  a:  this.api.getDatasA(),
  b:  this.api.getDatasA(),
  c:  this.api.getDatasA()
}).pipe(finalize(()=>this.datasLoaded=false)).subscribe(abc=>{
   abc.a  //a data here
   abc.b  //b data here
   abc.c  //c data here
});