Angular 如何在加载数据之前显示加载屏幕

Question

我想在加载数据之前有一个加载屏幕。我的数据是从 ngOnInIt 收集的，我想确保页面仅在数据加载后显示。

@if (!(dataReady$ | async)) {
  <div class="spinner-overlay">
    <app-loader/>
  </div>
}
<hr>
<div>
  <h1>something</h1>
  <p>secondthing</p>
</div>

  protected dataReady$ = new BehaviorSubject(false);
  protected amountChange = signal(DetailsService.name);

我尝试在 ngOnInIt 中设置一个布尔值，但没有帮助，因为 HTML 首先加载。

Answer 1

您可以使用

@if

和

@else

在数据加载时显示加载屏幕。我还使用

as

将异步数据存储在要使用的模板的属性中。

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    @if ((data$ | async); as data) {
      @for(row of data;track $index) {
        <div>{{row.test}}</div>
      }
    } @else {
      loading...
    }
    <hr>
    <div>
      <h1>something</h1>
      <p>secondthing</p>
    </div>
  `,
})
export class App {
  data$ = of([
    { test: 1 },
    { test: 2 },
    { test: 3 },
    { test: 4 },
    { test: 5 },
  ]).pipe(delay(3000));
}

bootstrapApplication(App);

Stackblitz 演示