Question

Angular2 cli提供默认加载，直到它被引导<app-root>Loading...</app-root>。然后angular2路由解析器启动API调用以检查天气用户是否经过身份验证，然后进入所需的路由。

但是在这个过程中我可以看到空白屏幕。实际上，角度默认正在加载... 已被删除，解析器需要一些时间才能得到解决。

所以无论如何都要继续显示角度默认加载符号，直到路由器被解析。

Answer 1

你可以在下面试试，

在你的app-root组件中，

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>

希望这会有所帮助!!

继续显示角度默认加载，直到angular2路由器被解析？

1 个答案: