我正在尝试设置一个微调器以显示角度5中的请求。到目前为止,我一直在使用此处找到的教程:
这似乎很简单;根据事件将布尔值设置为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的初学者,所以这让我不知所措。这是否只是加载速度过快而使我无法看到微调框的情况,还是还有其他作用?
答案 0 :(得分:2)
您看不到微调器,因为它隐藏得非常快。将一些解析器附加到路由,以查看微调器的运行情况。您的微调框可能会在大约100毫秒内可见。
答案 1 :(得分:0)
尝试在此处设置超时以强制微调器显示
case event instanceof NavigationCancel: {
console.log(this.loading);
// force to wait 2 seconds to see the spinner.
setTimeout(() => {
this.loading = false;
}, 2000);
break;
}
正如Karol所述,否则看到微调框的速度太快了。没关系,您不必等待来自远程服务器的操作。这一切在本地发生得非常快。