我的场景如下。我有一个菜单,里面有多个选项。每个菜单应该根据用户权限进行显示(已经解决),大多数菜单项被封装为模块,并且大多数模块是惰性加载的,因此当用户第一次点击菜单项时,它会加载(到这里一切正常)。现在我的要求是,为了提供更好的用户体验,在用户点击菜单项并且惰性加载模块时需要显示活动指示器。
到目前为止,我尝试使用 Angular 路由器的 canActive、canLoad 和 canActivateChild 接口,但没有成功。
有什么想法吗?
我的场景如下。我有一个菜单,里面有多个选项。每个菜单应该根据用户权限进行显示(已经解决),大多数菜单项被封装为模块,并且大多数模块是惰性加载的,因此当用户第一次点击菜单项时,它会加载(到这里一切正常)。现在我的要求是,为了提供更好的用户体验,在用户点击菜单项并且惰性加载模块时需要显示活动指示器。
到目前为止,我尝试使用 Angular 路由器的 canActive、canLoad 和 canActivateChild 接口,但没有成功。
有什么想法吗?
你可以监听两个路由器事件:
RouteConfigLoadStart
RouteConfigLoadEnd
当延迟加载的模块被加载时,它们会触发。与诸如NavigationStart
之类的标准路由器事件相比,使用这些事件的优点在于它们不会在每次路由更改时触发。
在根AppComponent中监听这些事件,以显示/隐藏旋转符号。
app.component.ts
import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';
...
export class AppComponent implements OnInit {
loadingRouteConfig: boolean;
constructor (private router: Router) {}
ngOnInit () {
this.router.events.subscribe(event => {
if (event instanceof RouteConfigLoadStart) {
this.loadingRouteConfig = true;
} else if (event instanceof RouteConfigLoadEnd) {
this.loadingRouteConfig = false;
}
});
}
}
app.component.html
这里只是一个简单的字符串,但是你可以使用一个旋转组件。
<router-outlet></router-outlet>
<ng-container *ngIf="loadingRouteConfig">Loading route config...</ng-container>
我正在使用这种方法,版本为Angular v4.2.3
你可以像这样做:
<div class="main-loader" *ngIf="loading">
<div class="cssload-container" >
<div class="cssload-whirlpool"></div>
</div>
</div>
in app.component.ts
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
loading:boolean = false;
constructor(private router:Router) {
router.events.subscribe(event => {
if(event instanceof NavigationStart) {
this.loading = true;
console.log("event started")
}else if(event instanceof NavigationEnd) {
this.loading = false;
console.log("event end")
}
// NavigationEnd
// NavigationCancel
// NavigationError
// RoutesRecognized
});
}
in css any loading animation
希望这对你有所帮助。谢谢。
<routler-outlet></routler-outlet>
<div class='.loader>
Just, wait a sec ! I'm loading
</div>
router-outlet + .loader {
opacity : 1;
}
.loader {
opacity : 0;
}
<router-outlet>
将是空的。这将触发container:empty + .loader
选择器并显示你的加载器。当数据被加载时,<router-outlet>将不再为空,然后container:empty + .loader
选择器将不再处于活动状态,你的加载器将回到0的透明度。 - YounesM在加载第一个懒加载路由时,有可能会单击链接到其他懒加载路由。因此我们需要计算正在加载的路由数量:
app.component.ts
```
export class AppComponent {
currentlyLoadingCount = this._router.events.scan((c, e) => this._countLoads(c, e), 0);
constructor(private _router: Router) { }
private _countLoads(counter: number, event: any): number {
if (event instanceof RouteConfigLoadStart) return counter + 1;
if (event instanceof RouteConfigLoadEnd) return counter - 1;
return counter;
}
```
app.component.html
<ng-container *ngIf="currentlyLoadingCount | async">正在加载路由配置...</ng-container>
public navigate(url: string) {
this.configurationService.loading = true; //service variable linked with html loader
//let's give time to tortoise IE11 to render loader before navigation...
let obj = this;
setTimeout(function()
{
obj.router.navigateByUrl(url);
}, 1);
}
else if (event instanceof NavigationCancel) { this.isLoading = false }
,以处理当懒加载尚未完成时移动到另一个路由/模块的情况。 - Uriy MerkUriy