继续显示角度默认加载，直到解析Angular2路由器为止

Question

angular2 cli提供默认加载，直到获得引导<app-root>Loading...</app-root>为止。然后，Angular2路由解析器启动API调用以检查天气用户是否已进行身份验证，或者之后已进入所需路线。

但是在此过程之间，我可以看到空白屏幕。实际上，默认值加载... 已删除，并且解决方案需要一些时间才能解决。

因此，无论如何是否要继续显示角度默认加载符号，直到解决路由器。

Answer 1

您可以在下面尝试，

在您的应用程序组件中，

showSpinner = false;
constructor(private router: Router) {}
ngOnInit(){
   this.router.events
      .filter(e => {
        return (e instanceof NavigationStart)
          || (e instanceof NavigationEnd ||
            e instanceof NavigationCancel ||
            e instanceof NavigationError);
      })
      .map(e => (e instanceof NavigationStart))
      .distinctUntilChanged()
      .subscribe(showSpinner => {
        this.showSpinner = showSpinner;
      });
}

在HTML中，使用showSpinner属性显示一些GIF或动画，您也可以使用(不进行测试但应该使用(显示Loading...消息或您最初所拥有的内容，

<ng-content *ngIf="showSpinner" ></ng-content> 

希望这会有所帮助！