在Angular中，可以使用一个全局的加载指示器来显示页面正在加载的状态。以下是一个示例的解决方法：

1. 创建一个loading.service.ts服务文件，用于管理加载状态：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  private isLoading = false;

  constructor() { }

  show() {
    this.isLoading = true;
  }

  hide() {
    this.isLoading = false;
  }

  isLoadingStatus() {
    return this.isLoading;
  }
}

2. 在根组件的模板文件中添加加载指示器的 HTML 代码：

3. 在根组件的控制器文件中订阅服务中的加载状态，并在加载状态改变时更新加载指示器的状态：

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
  selector: 'app-root',
  template: `
    

      
    
    
  `
})
export class AppComponent implements OnInit {
  isLoading = false;

  constructor(private loadingService: LoadingService) { }

  ngOnInit() {
    this.loadingService.isLoadingStatus().subscribe((isLoading) => {
      this.isLoading = isLoading;
    });
  }
}

4. 在需要显示加载指示器的组件中调用loading.service.ts服务中的方法来控制加载状态：

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
  selector: 'app-example',
  template: `
    
  `
})
export class ExampleComponent implements OnInit {
  constructor(private loadingService: LoadingService) { }

  ngOnInit() {
    this.loadingService.show(); // 显示加载指示器

    // 模拟异步加载数据
    setTimeout(() => {
      this.loadingService.hide(); // 隐藏加载指示器
    }, 2000);
  }
}

这样，当loading.service.ts服务中的加载状态改变时，根组件的加载指示器会自动更新，从而能够始终显示加载状态。