具有角度通用和ngIf检查的延迟-角度9

Question

我刚刚开始将角通用性集成到现有应用程序中，并且我注意到页面有一秒钟用错误的布局呈现，并且当页面完全加载时一切看起来都很好。

这是一个示例：

我在页面加载中获得这样的登录状态：

this.authService.isLoggedIn.subscribe(res => {
  this.isLoggedIn = res;
});

并且根据结果是或否设置不同的布局：

<div *ngIf="isLoggedIn" class="user-logged">
    // user logged in
</div>
<div *ngIf="!isLoggedIn" class="user-logged">
    // user not logged in
</div>

但是当服务返回true（这意味着用户已登录）时，有一秒钟，我可以看到未登录状态，然后页面就会加载，并且一切正常。所有BreakpointObserver检查也会发生这种情况。

Answer 1

发生这种情况是因为，当您的应用首次评估isLoggedIn时，它为false（或未定义，取决于您如何定义它）。

然后，当订阅事件返回数据时，isLoggedIn值更改，因此由于*ngIf条件，您的html也更改了。

如果要在应用渲染之前加载isLoggedIn数据，则可以使用APP_INITIALIZER。

这篇文章解释了如何使用它：https://www.cidean.com/blog/2019/initialize-data-before-angular-app-starts/

这个人年龄较大，但也很好：https://devblog.dymel.pl/2017/10/17/angular-preload/