Angular 15：如何在ngOnInit的GET请求等待时显示Spinner？

方案一：确保HTTP请求在Angular Zone内执行 #

如果你的DataService里的getProducts()未使用Angular自带的HttpClient，或手动脱离了NgZone，会导致回调中的变量更新无法触发视图变更。先确认服务内使用HttpClient：

// DataService示例代码
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private http: HttpClient) {}

  getProducts() {
    return this.http.get<Product[]>('你的API接口地址');
  }
}

若已使用HttpClient但问题依旧，用NgZone强制回调在Zone内运行：

// ShopComponent修改后代码
import { NgZone } from '@angular/core';

@Component({...})
export class ShopComponent {
  constructor(public ds: DataService, private zone: NgZone) {}

  ngOnInit() {
    this.ds.getProducts().subscribe((resp) => {
      this.zone.run(() => {
        this.products = resp as Product[];
        this.isDataLoaded = true;
      });
    });
  }
}

方案二：改用AsyncPipe（推荐） #

这种方式无需手动管理订阅和布尔变量，Angular会自动处理变更检测与订阅清理，代码更简洁：

// ShopComponent修改后代码
import { Observable } from 'rxjs';

@Component({...})
export class ShopComponent {
  products$: Observable<Product[]>;

  constructor(public ds: DataService) {}

  ngOnInit() {
    this.products$ = this.ds.getProducts();
  }
}

<!-- 组件HTML修改后代码 -->
<div *ngIf="!(products$ | async) as products; else loadedContent">
  <mat-spinner></mat-spinner>
</div>

<ng-template #loadedContent>
  Data is loaded
  <!-- 此处可直接使用products变量渲染产品列表 -->
</ng-template>

方案三：手动触发变更检测 #

注入ChangeDetectorRef，在更新变量后手动通知Angular执行变更检测：

// ShopComponent修改后代码
import { ChangeDetectorRef } from '@angular/core';

@Component({...})
export class ShopComponent {
  constructor(public ds: DataService, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.ds.getProducts().subscribe((resp) => {
      this.products = resp as Product[];
      this.isDataLoaded = true;
      this.cdr.detectChanges(); // 手动触发变更检测
    });
  }
}

额外检查：若组件开启了OnPush变更检测策略，只有输入属性变化或组件内事件触发时才会执行检测，上述方案二或三同样可解决问题。

内容的提问来源于stack exchange，提问作者GamblingMan