Angular 在所有执行的API上隐藏加载程序

我正在做一个有多个模块的角度项目。我试图在每个页面的加载上显示一个加载程序，并且只在该页面的所有API调用请求完成后隐藏加载程序

因此，我的问题不会仅仅通过在调用onInit之后立即显示加载程序并在所有请求完成之后隐藏它来解决

建议我一个最好的选择，这样我就可以在所有执行的api上显示和隐藏加载器

ngOnInit() {
    this.function1();
    this.function2();
    this.function3();
}

function1(){
    this.spinner.show();
    // API code here.. 
    this.spinner.hide();
}

function2(){
    this.spinner.show();
    // API code here.. 
    this.spinner.hide();
}

function3(){
    this.spinner.show();
    // API code here.. 
    this.spinner.hide();
}

看看这个

component.ts

公共isLoading：布尔值；
恩戈尼尼特（）{
this.isLoading=true；
this.myBackendCode（）.finally（（）=>this.isLoading=false；）；
}
私有异步myBackendCode（）{
//代码在这里。。。
}

component.html

像这样使用加载程序，在本例中是mat spinner

您能创建一个Stackblitz示例吗？当您说要在页面加载上显示加载程序时，angular上下文中的页面加载是Ngonit lifecycle hook。“仅仅在onInit之后显示一个加载程序并不能解决我的问题”是什么意思？@Rajat无法创建一个示例。@MehdiShakeri我在函数调用中使用“this.spinner.show（）”，在hide中使用“this.spinner.hide（）”。。这里的问题是加载程序在所有API上一次又一次地闪烁，所以我想在所有执行的API上使用一个通用的“this.spinner.show（）”和“this.spinner.hide（）”。那么为什么这个解决方案不能解决您的问题呢？我已经尝试过了，但它在API完成之前隐藏了。所以请，像我一样放置您的代码示例，以便我们可以看到问题。更新了问题，以便您可以检查。编写

this.spinner.hide（）

代码的唯一原因是在“API代码”之前运行，因为您正在异步模式下运行。在

hide（）

之前添加一些console.debug（“api已完成”），在它之后添加console.debug（“隐藏运行”）。检查什么先到。