![上显示负载微调器]( "上显示负载微调器")
本文介绍了在 Angular2 Route Navigate 上显示负载微调器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我见过(这个问题) 以及来自@borislemke 的回答.
实际上，尝试了 Angular2 演示应用程序，但它在导航到另一条路线时没有改变 Loader Div 背景颜色.
我的AppComponent如下，
import { Component, OnInit } from '@angular/core';从'@angular/router'导入{路由器，ROUTER_DIRECTIVES，NavigationStart，NavigationEnd，NavigationError，NavigationCancel}；从@angular/common"导入 {NgClass}；从 './dialog.service' 导入 { DialogService };从 './heroes/hero.service' 导入 { HeroService };@成分({选择器:'我的应用'，模板:`<h1 class="title">组件路由器</h1><div>正在导航 -->{{isLoading}}
<div [ngClass]="{afterLoad: !isLoading, loading: isLoading }" >装载机旋转容器</div><导航><a routerLink="/crisis-center" routerLinkActive="active"routerLinkActiveOptions="{exact: true }">危机中心</a><a routerLink="/heroes" routerLinkActive="active">Heroes</a><a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a><a routerLink="/login" routerLinkActive="active">登录</a></nav><路由器插座></路由器插座>`，样式:[`.loading{背景颜色:红色}.afterLoad{背景颜色:黄色}`]，供应商: [英雄服务，对话服务],指令:[ROUTER_DIRECTIVES, NgClass]})导出类 AppComponent 实现 OnInit {isLoading: boolean = false;构造函数(私有_路由器:路由器){}ngOnInit() {//TODO: 为事件分配正确的类型this._router.events.subscribe((event: any): void => {this.navigationInterceptor(事件);});}导航拦截器(事件):无效{如果(导航开始的事件实例){this.isLoading = true;}如果(导航结束的事件实例){this.isLoading = false;}如果(导航取消的事件实例){this.isLoading = false;}如果(导航错误的事件实例){this.isLoading = false;}}}
我的 plunker 正在这里进行现场测试.
谁能帮我找出失败的可能原因?
谢谢.
解决方案
您的应用速度太快，无法获取导航更改 :)
我添加了一个 setTimeout 来模拟慢速连接，如下所示:
if(NavigationEnd 的事件实例){//this.isLoading = false;setTimeout(() => this.isLoading = false, 1000);}
试试上面的代码，你可以看到background-color在变化.
I have seen (this question) and its Answer from @borislemke.
Actaully, tried on Angular2 Demo Application but its not changing Loader Div Background color while Navigating to another route.
My AppComponent is as follows,
import { Component, OnInit } from '@angular/core';
import { Router, ROUTER_DIRECTIVES, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
import {NgClass} from '@angular/common';
import { DialogService } from './dialog.service';
import { HeroService } from './heroes/hero.service';
@Component({
selector: 'my-app',
template: `
<h1 class="title">Component Router</h1>
<div>Is Navigating --> {{isLoading}}</div>
<div [ngClass]="{afterLoad: !isLoading, loading: isLoading }" > Loader Spinner Container </div>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active"
routerLinkActiveOptions="{ exact: true }">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
<a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
</nav>
<router-outlet></router-outlet>
`,
styles:[`
.loading{
background-color:red
}
.afterLoad{
background-color:yellow
}
`],
providers: [
HeroService,
DialogService
],
directives: [ROUTER_DIRECTIVES, NgClass]
})
export class AppComponent implements OnInit {
isLoading: boolean = false;
constructor(private _router:Router) {}
ngOnInit() {
// TODO: assign proper type to event
this._router.events.subscribe((event: any): void => {
this.navigationInterceptor(event);
});
}
navigationInterceptor(event): void {
if (event instanceof NavigationStart) {
this.isLoading = true;
}
if (event instanceof NavigationEnd) {
this.isLoading = false;
}
if (event instanceof NavigationCancel) {
this.isLoading = false;
}
if (event instanceof NavigationError) {
this.isLoading = false;
}
}
}
My plunker is here for live test.
Can anyone help me figuring out the possible cause of failure?
Thanks.
解决方案
Your app is too fast to pick up the navigation changes :)
I added a setTimeout to simulate a slow connection like so:
if (event instanceof NavigationEnd) {
// this.isLoading = false;
setTimeout(() => this.isLoading = false, 1000);
}
Try the above code and you can see the background-color changing.
这篇关于在 Angular2 Route Navigate 上显示负载微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！