无法根据路由请求在 Angular 中显示微调器答案

【问题标题】：Unable to show spinner in Angular on routing request无法根据路由请求在 Angular 中显示微调器
【发布时间】：2019-02-24 03:09:21
【问题描述】：

我正在尝试设置一个微调器以显示角度 5 中的请求。到目前为止，我一直在使用此处找到的教程：

https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/

这看起来很直接；根据事件设置一个布尔值以评估为真或假。我真正需要对代码进行的唯一更改是在 html 中使用 ngx-spinner 而不是 mat-progress-bar。但是，到目前为止，我一直无法让微调器出现。

这里是参考代码，虽然它与链接的几乎相同：

import {Component} from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    loading = false;

    constructor(private router: Router, private spinner: NgxSpinnerService) {
        this.router.events.subscribe((event: Event) => {
            console.log('Event Occured');
            switch (true) {
                case event instanceof NavigationStart: {
                    this.loading = true;
                    console.log(this.loading);
                    break;
                }
                case event instanceof NavigationEnd:
                case event instanceof NavigationError:
                case event instanceof NavigationCancel: {
                    this.loading = false;
                    console.log(this.loading);
                    break;
                }
                default: {
                    break;
                }
            }
        });
    }

    /*ngOnInit() {
        /!** spinner starts on init *!/
        this.spinner.show();

        setTimeout(() => {
            /!** spinner ends after 5 seconds *!/
            this.spinner.hide();
        }, 5000);
    }
*/

}

这里是 app.component.html：

<ngx-spinner [hidden]="loading==false"
             bdColor = "rgba(51, 51, 51, 0.8)"
             size = "default"
             color = "#ffee00"
             type = "pacman"
>
<app-nav></app-nav>
<router-outlet [hidden]="loading==true">
</router-outlet>

我希望在 loading 为真时显示微调器，并隐藏 router-outlet 及其提供的内容。一旦loading 为假，微调器将被隐藏并显示内容。

到目前为止，我只能在注释掉除 NavigationStart 之外的所有案例时显示微调器，从而防止 loading 永远更改为 false。此外，尽管上面有隐藏标签，我还是能够看到微调器后面的 router-outlet 返回的内容。我可以通过将它放在一个 div 中来隐藏它：

<div [hidden]="loading==true">
    <app-nav></app-nav>
    <router-outlet>
    </router-outlet>
</div>

但这仍然不能解决这样一个事实，即当我允许 loading 评估为 false 时，我一开始就看不到微调器；它立即加载由路由器出口返回的组件。我是角度的初学者，所以这让我很难过。这仅仅是加载速度很快让我看到微调器的情况，还是其他原因？

【问题讨论】：

请创建一个stackbliz
我无法复制您的问题。它对我有用
你的代码中有这个吗？ getTeams(): Observable<string[]> { return of(['Barcelona', 'Real Madrid', 'Toulouse', 'PSG']).pipe(delay(2000)); } 在教程 github repo 中
试试github.com/kKen94/ngx-progress

标签： angular spinner loader

【解决方案1】：

尝试在此处设置超时以强制显示微调器

case event instanceof NavigationCancel: {
  console.log(this.loading);
  // force to wait 2 seconds to see the spinner.
  setTimeout(() => {
    this.loading = false;
  }, 2000);
  break;
}

正如 Karol 所提到的，否则它发生得太快而无法看到微调器。没关系，您不必等待来自远程服务器的东西。这一切在本地发生得相当快。

【讨论】：

当然不是。这是一个强制执行所需行为的示例。
请发表评论，因为这不是答案

【解决方案2】：

您看不到微调器，因为它隐藏得非常快。将一些解析器附加到路由以查看微调器的运行情况。您的微调器可能在 100 毫秒内可见。

【讨论】：