在Angular 7中更改路线时加载微调器动画

Question

我玩过 Angular 动画（淡入、淡出等），但我想在从一条路线切换到另一条路线时显示自定义加载微调器：产品列表 TO 产品的详细信息（以及返回路径）。

当路线改变时，微调器必须适合整个 <router-outlet></router-outlet> 容器。

我没有找到仅使用动画的方法。请问有可能吗？我只是

我做了类似的事情，但为了应用程序加载（不是为了改变路线），使用以下代码：

<app-root>
  <div class="app-loading">
    <div class="logo"></div>
    <svg class="spinner" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
  </div>
</app-root>

实际上，我通过在从 API 检索数据时显示一条消息来解决此问题。像这样：

<div class="col-12" *ngIf="loadingEvents">
  <div class="alert alert-info"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>Loading events</div>
</div>

以及组件中HTTP客户端内部的逻辑。

但是，这不是路由更改之间的加载微调器，它是在我已经在下一条路由中执行 HTTP 请求时的微调器。因此，这是组件逻辑内部的代码。我不要那个。我想要和动画一样的概念。

Answer 1

拦截器检测何时执行请求。从您的示例中，我了解到执行了一个请求：产品列表到产品详细信息。

你可以按照这篇文章为你的文章实现一个拦截器： https://medium.com/@zeljkoradic/loader-bar-on-every-http-request-in-angular-6-60d8572a21a9

关于加载器的类型，我不会使用微调器，也许某些请求会执行得非常快，所以你只会看到一个闪烁。也许您可以使用与文章中相同的方法。