Javascript 在路由解析程序/路由更改上显示加载图标
我试图显示一个加载图标,而路由解析器从数据库获取数据 我尝试了以下选项:Javascript 在路由解析程序/路由更改上显示加载图标,javascript,angular,typescript,angular5,Javascript,Angular,Typescript,Angular5,我试图显示一个加载图标,而路由解析器从数据库获取数据 我尝试了以下选项: _router.events.subscribe((routerEvent: RouterEvent) => { if (routerEvent instanceof NavigationStart) { console.log("start"); this.loading = true; } else if (routerEvent instanceof Navigation
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
console.log("start");
this.loading = true;
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
console.log("end");
this.loading = false;
}
});
<h1 *ngIf="loading">Loading</h1>
<div class="uk-offcanvas-content">
<h1>{{loading}}</h1>
<h1 *ngIf="loading">Loading</h1>
<app-root-nav></app-root-nav>
<app-notifications></app-notifications>
<router-outlet></router-outlet>
</div>
import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";
import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
isLoggedIn: boolean;
public loading: boolean = true;
UIkit: any;
constructor(private _router: Router, private _authService: AuthenticationService) {
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
this.loading = false;
}
});
}
ngAfterViewInit() {
}
ngOnInit() {
UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
}
根组件:
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
console.log("start");
this.loading = true;
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
console.log("end");
this.loading = false;
}
});
<h1 *ngIf="loading">Loading</h1>
<div class="uk-offcanvas-content">
<h1>{{loading}}</h1>
<h1 *ngIf="loading">Loading</h1>
<app-root-nav></app-root-nav>
<app-notifications></app-notifications>
<router-outlet></router-outlet>
</div>
import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";
import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
isLoggedIn: boolean;
public loading: boolean = true;
UIkit: any;
constructor(private _router: Router, private _authService: AuthenticationService) {
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
this.loading = false;
}
});
}
ngAfterViewInit() {
}
ngOnInit() {
UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
}
根组件HTML:
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
console.log("start");
this.loading = true;
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
console.log("end");
this.loading = false;
}
});
<h1 *ngIf="loading">Loading</h1>
<div class="uk-offcanvas-content">
<h1>{{loading}}</h1>
<h1 *ngIf="loading">Loading</h1>
<app-root-nav></app-root-nav>
<app-notifications></app-notifications>
<router-outlet></router-outlet>
</div>
import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";
import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
isLoggedIn: boolean;
public loading: boolean = true;
UIkit: any;
constructor(private _router: Router, private _authService: AuthenticationService) {
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
this.loading = false;
}
});
}
ngAfterViewInit() {
}
ngOnInit() {
UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
}
更新2:
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
console.log("start");
this.loading = true;
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
console.log("end");
this.loading = false;
}
});
<h1 *ngIf="loading">Loading</h1>
<div class="uk-offcanvas-content">
<h1>{{loading}}</h1>
<h1 *ngIf="loading">Loading</h1>
<app-root-nav></app-root-nav>
<app-notifications></app-notifications>
<router-outlet></router-outlet>
</div>
import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";
import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
isLoggedIn: boolean;
public loading: boolean = true;
UIkit: any;
constructor(private _router: Router, private _authService: AuthenticationService) {
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
this.loading = false;
}
});
}
ngAfterViewInit() {
}
ngOnInit() {
UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
}
app.component.html:
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
console.log("start");
this.loading = true;
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
console.log("end");
this.loading = false;
}
});
<h1 *ngIf="loading">Loading</h1>
<div class="uk-offcanvas-content">
<h1>{{loading}}</h1>
<h1 *ngIf="loading">Loading</h1>
<app-root-nav></app-root-nav>
<app-notifications></app-notifications>
<router-outlet></router-outlet>
</div>
import {Component, OnInit, AfterViewInit} from '@angular/core';
import {AuthenticationService} from "../../authentication/services/authentication.service";
import {Router, Event, NavigationStart, NavigationEnd, NavigationCancel, NavigationError} from "@angular/router";
import {RouterEvent} from "@angular/router";
import UIkit from 'uikit'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
isLoggedIn: boolean;
public loading: boolean = true;
UIkit: any;
constructor(private _router: Router, private _authService: AuthenticationService) {
_router.events.subscribe((routerEvent: RouterEvent) => {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
console.log(routerEvent);
console.log("Loading is " + this.loading);
} else if (routerEvent instanceof NavigationError || NavigationCancel || NavigationEnd) {
this.loading = false;
}
});
}
ngAfterViewInit() {
}
ngOnInit() {
UIkit.notification({
message: 'my-message!',
status: 'primary',
pos: 'top-right',
timeout: 5000
});
}
}
当路由解析程序从数据库获取数据时,请尝试此代码以显示加载图标:
constructor(private router: Router){
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
this.loaderservice.show();
} else if (e instanceof ChildActivationEnd) {
this.loaderservice.hide();
}
});
}
我也有类似的情况,我通过以下方式解决:
public loading = true;
constructor(private router: Router) {
}
public onClick(): void {
this.loading = true;
this.router.navigate(['/test']).then(_ => {
this.loading = false;
});
}
我以编程方式管理导航。在开始导航之前,我将加载变量设置为
true
,当路由完成时,我将其值切换为false
。这里的问题非常简单,但很容易忽略。您正在不正确地检查路由器事件类型,它应该如下所示:
else if (routerEvent instanceof NavigationError || routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationEnd)
您使用的方法是始终返回true,因为您的第二个子句基本上是“or if NavigationCancel is truthy”,这是一个定义,因为它是一个现有类型。因此,当路由解析开始时,加载会立即设置为false,因为在NavigationEnd事件之前有很多中间路由器事件,并且由于您检查的方式,所有这些事件都会设置为false
plunk:您是否可以初始化
公共加载:boolean=true
,而不是在导航开始
中将其设置为true
?另一个建议是:将loading
设置为属性,并将console.log(“loading is”,value)
放入setter中,以查看其值是否在适当的时候发生了更改。还有一个建议:在回调开始时放置console.log(routerEvent)
,查看您是否捕获了所有适当的事件。@ConnorsFan感谢您的评论。我已经应用了你提供的建议。不幸的是仍然没有运气。有关更多详细信息,请参阅我更新的问题。我猜您的本地服务器响应数据太快。试着人为地减慢速度,将.delay(3000)放在可观察到的分辨率中。@bryan60仍然不走运,我的朋友。我刚试过你的建议。这真让我受不了,真不敢相信我居然错过了。有时是简单的事情让你发疯。谢谢你的帮助,伙计。非常感谢。p、 因为某种原因,我必须等3个小时才能颁发奖金。我很快就会做的。这是事实,已经发生在我身上无数次了,这一次真的很容易被忽视,4-5个开发人员一开始就错过了,包括我。我甚至没有意识到这一点,直到我开始在plunkr中记录所有将loading设置为false的路由器事件,并意识到除start之外的所有路由器事件都将其设置为false,然后检查子句,它击中了我。很乐意帮忙。