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.INITIERZER是否完成。您可以使用donePromise来检查APP_INITIALIZER的ApplicationInitStatus公开状态。

所以我将在app.component.ts中获得注入令牌：

@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中检查是否使用donePromise和异步管道完成了APP_INITIALIZER：

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

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

1 个答案: