如何在 Angular Route Resolver 中显示加载指示器答案

【问题标题】：How to show a loading indicator in Angular Route Resolver如何在 Angular Route Resolver 中显示加载指示器
【发布时间】：2020-11-15 03:19:19
【问题描述】：

我在我的 Angular 项目中创建了一个路由解析器。我还在我的应用程序组件中实现了加载 gif。当我从一条路线导航到另一条路线时，加载工作正常。但是，如果我重新加载页面或按 f5，那么页面会在一段时间内变为空白（白色）。解析器获取数据后页面再次显示。

问题-如何在我刷新页面时显示相同的加载器？

应用组件 HTML

<div *ngIf="isLoading == true">
    <div class="loader">
       <img src="./assets/images/loader.gif" alt="" />
    </div>
</div>

<!-- while route is completed ajax calls -->
<div *ngIf="isLoading == false">
    <router-outlet></router-outlet>
</div>

应用程序组件

public isLoading = false;

constructor(private router: Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.isLoading = true;
          break;
        }

        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: {
          this.isLoading = false;
          break;
        }
        default: {
          break;
        }
      }
    });
  }

【问题讨论】：

标签： angular

【解决方案1】：

只需将相同的加载 gif 放入 index.html 中，如下所示。

<body>
  <app-root>
    <div class="loader">
       <img src="./assets/images/loader.gif" alt="" />
    </div>
  </app-root>
</body>

发生这种情况是因为当您刷新浏览器时，应用程序会再次初始化，这需要一些时间。通过如上所示放置加载 gif，将确保在应用加载之前显示正确的加载。

【讨论】：

如果我将加载器放在 app-root 中，它仍然无法正常工作，但它仍然显示 banlk 白页。
您是否检查了“加载器”类是否正确应用以及 gif 路径
还要确保内联加载器类的 css。您可以尝试为您的图像使用更压缩的格式，甚至更好的内联 svg