angular - 如何在 Angular 11 中创建加载组件

Question

我需要用 创建一个加载组件 Angular 11 .
例如，在加载数据时，我想要我的 加载组件 要显示，否则其他组件应该可以工作。
我没有正确的想法来做到这一点？
谁能帮我？

Answer 1

您可以在应用程序组件中创建全屏加载覆盖，并显示和隐藏该组件使用服务和可观察
应用组件:
html:

<div *ngIf="loadingService.isLoading$ | async">Loading...</div>

ts:

constructor(public loadingService: LoadingService) {

}

装载服务:

class LoadingService {
  private isLoading = new Subject<boolean>();
  isLoading$ = this.isLoading as Observable;

  toggleLoading(val: boolean) {
    this.isLoading.next(val);
  }
}

从任何组件注入(inject)服务开始加载并调用切换加载方法:

constructor(private loadingService: LoadingService) {
  this.loadingService.toggleLoading(true);
}

这段代码中可能有一些语法错误或拼写错误，因为我没有测试过，只是分享这个想法
如果您遇到任何其他问题，请告诉我