Angular - 如何在使用 APP_INITIALIZER 加载应用程序时显示等待指示器

Question

如何在 Angular 应用程序执行 app_initializer 代码时显示等待指示器。

到目前为止，我可以在加载应用程序之前显示等待指示器。但是在该页面保持空白直到 app_initializer 代码完成之后。所以我想显示某种等待指示器。

<app-root>Loading....</app-root>

也试过了

<app-root></app-root>
<div>Loading...</div>

当 app_initializer 正在执行时，这些选项都不起作用......在这段时间里，我正在调用 web api 来获取一些启动数据。

Answer 1

如果我正确理解您想要实现的目标，您应该检查 app.component 是否已完成 APP_INITIALIZER。 ApplicationInitStatus 公开 APP_INITIALIZER 的状态，您可以使用 donePromise 进行检查。

所以我会在 app.component.ts 中获得 Injection Token：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent implements AfterViewInit, OnInit {

  constructor(
    @Inject(APP_INITIALIZER) public appInit: ApplicationInitStatus
  ) { ... }

  ngOnInit () {...}
}

并在 app.component.html 中检查 APP_INITIALIZER 是否使用 donePromise 和异步管道完成：

<ng-container *ngIf="!(appInit.donePromise | async)"> Loading... </ng-container>

Answer 2

以下对我有用：

<style>
    .loader {
    margin: 50px auto 0;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    }
    @keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }
</style>

<app-root>
      <div class="loader"></div>
</app-root>