如何在每个或 http 请求上调用微调器答案

【问题标题】：How to call spinner on every or http request如何在每个或 http 请求上调用微调器
【发布时间】：2019-10-09 23:32:23
【问题描述】：

我正在尝试在每次路线更改时显示一个微调器，例如从 /dashboard 到 /dashboard2 ，但它仅在我从地址栏而不是通过单击组件时才有效

> 
>     import { Component, Input, OnDestroy, Inject, ViewEncapsulation } from '@angular/core';
>     import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
>     import { DOCUMENT } from '@angular/common';
> 
>     @Component({
>       selector: 'app-spinner',
>       templateUrl: './spinner.component.html',
>       styleUrls: ['./spinner.component.css'],
> 
>       encapsulation: ViewEncapsulation.None
>     })
>     export class SpinnerComponent implements OnDestroy {
> 
>       public isSpinnerVisible = true;
> 
>       @Input() public backgroundColor = 'rgba(0, 115, 170, 0.69)';
> 
>       constructor(private router: Router, @Inject(DOCUMENT) private document: Document) {
>         this.router.events.subscribe(
>           event => {
>             if (event instanceof NavigationStart) {
>               this.isSpinnerVisible = true;
>             } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
>               this.isSpinnerVisible = false;
>             }
>           },
>           () => {
>             this.isSpinnerVisible = false;
>           }
>         );
>       }
> 
>       ngOnDestroy(): void {
>         this.isSpinnerVisible = false;
>       }
>     }
> 
> 
> 
>

 //spinner.component.html
>     <div *ngIf="isSpinnerVisible" class="spinner"></div>
> 
>     //app.component.ts
> 
>     <router-outlet>
>         <app-spinner>
>         </app-spinner>
>     </router-outlet>
> 
>

【问题讨论】：

标签： angular typescript spinner

【解决方案1】：

我想你可以在这里找到答案。 https://firstclassjs.com/display-a-loader-on-every-http-request-using-interceptor-in-angular-7/ 我用过，它需要一个安装过程，但相当有效。尽量不要粘贴完整的代码。

在处理请求之前激活加载 css，并在收到任何回复时停止它。

加载的 html 可以是这样的。

<p class="loading" *ngIf="LoadingVar">Loading dots</p>

用css：

body {
  background-color: #47d1da;}
p {
  color: white;
  font: 300 4em/150% Impact;
  text-align: center;}


/* loading dots */

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

在 TS 中

sendHTTP(){
  loadingVar = true;
  httpservice(){..}
}

【讨论】：