我的场景如下。我有一个菜单，有多个选项。每个菜单应根据用户权限显示（已解决），大多数菜单项都封装为模块，并且大多数模块都是延迟加载的，因此当用户第一次单击菜单项时，它会加载（到这里所有效果很好），现在我的要求是，为了提供更好的用户体验，我需要在加载延迟加载模块时在用户单击菜单项后显示活动指示器。
到目前为止，我尝试使用 Angular Router 中的 canActive、canLoad、canActivateChild 接口，但没有成功。
有什么想法吗？
【问题讨论】：
标签： angular lazy-loading angular2-routing
你可以只使用 CSS ！
<routler-outlet></routler-outlet>
<div class='.loader>
Just, wait a sec ! I'm loading
</div>
在您的模板中
router-outlet + .loader {
opacity : 1;
}
.loader {
opacity : 0;
}
然后你可以创建fancy spinners with HTML/CSS
【讨论】：
<router-outlet> 将为空。这将触发container:empty + .loader 选择器并显示您的加载程序。加载数据时。 container:empty + .loaderselector 将不再处于活动状态，您的加载程序将返回到 opacity 为 0你可以这样做
<div class="main-loader" *ngIf="loading"> <div class="cssload-container" > <div class="cssload-whirlpool"></div> </div> </div>
在 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
});
}
在css中任意加载动画
希望这对您有用。谢谢
【讨论】：
你可以监听两个路由器事件：
RouteConfigLoadStartRouteConfigLoadEnd在加载延迟加载的模块时它们会触发。与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 中使用这种方法
【讨论】：
else if (event instanceof NavigationCancel) { this.isLoading = false }，用于在完成延迟加载之前移动到另一个路由/模块的情况。
可以在加载第一个时单击指向其他延迟加载路由的链接。这就是为什么我们需要计算正在加载的路由：
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">Loading route config...</ng-container>
【讨论】：
对于那些需要与 IE11 兼容（和处理）的人，接受的答案不起作用，因为从一个模块切换到另一个模块时 IE11 不会呈现加载器，所以我做了一个（不是很优雅但有效）解决方法：
在我的 menuItem 切换点击事件中：
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);
}
【讨论】：