如何在 Angular 11 中创建加载组件答案

【问题标题】：How to create loading component in Angular 11如何在 Angular 11 中创建加载组件
【发布时间】：2021-07-30 17:29:51
【问题描述】：

我需要用 Angular 11 创建一个加载组件。例如，在加载数据时，我希望显示我的 loading-component，否则其他组件应该可以工作。

我没有正确的想法来做这个？

谁能帮帮我？

【问题讨论】：

标签： angular loading angular11

【解决方案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);
  }
}

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

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

此代码中可能存在一些语法错误或拼写错误，因为我尚未对其进行测试，只是分享一下想法如果您遇到任何其他问题，请告诉我

【讨论】：