Angular 如何在角路由解析器中显示加载指示器

我已经在我的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>

---

只需将相同的加载gif放入

index.html

中，如下所示

---

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

如果我将加载程序放在应用程序根目录中，它将不起作用，但仍显示banlk白色页面。您是否检查了类“加载程序”的应用是否正确，gif路径是否也确保为加载程序类内联css。您可以尝试对图像使用更压缩的格式，或者更好地使用内嵌svg

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;
        }
      }
    });
  }