Question

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

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

这似乎很简单；根据事件将布尔值设置为true或false。我真正需要对代码进行的唯一更改是将HTML改为ngx-spinner，而不是mat-progress-bar。但是，到目前为止，我还无法显示微调器。

以下是供参考的代码，尽管它与链接的代码几乎相同：

[ { 'one': '8b45544b-6d35c53c3d423' },
  { 'two': '5a509481-a43k4d40r4c44' } ].map(o => Object.keys(o)[0])

这是app.component.html：

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

}

我想让旋转器在<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为假后，微调框将被隐藏并显示内容。

到目前为止，当我注释掉除NavigationStart以外的所有情况时，我只能让微调器显示，以防止loading变为false。另外，尽管上面有隐藏的标签，我仍然可以看到微调器后面路由器出口返回的内容。通过将它放在div中，我可以将其隐藏起来：

loading

但是，这仍然无法解决以下事实：当我允许<div [hidden]="loading==true"> <app-nav></app-nav> <router-outlet> </router-outlet> </div>评估为false时，我从来没有看到过微调器。它会立即加载路由器出口返回的组件。我是angular的初学者，所以这让我不知所措。这是否只是加载速度过快而使我无法看到微调框的情况，还是还有其他作用？

Answer 1

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

Answer 2

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

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

正如Karol所述，否则看到微调框的速度太快了。没关系，您不必等待来自远程服务器的操作。这一切在本地发生得非常快。

无法在路由请求中在Angular中显示微调框

2 个答案: