在渲染模板之前解析模型

Question

我的问题是我的数据在模板加载时发生了变化，因此需要2秒才能看到旧数据不是登录用户，之后会变为正常模式。

如何防止渲染初始状态？

我的服务代码：

    @Injectable()
    export class UserData {
      user = {};
      isAuth = false;

      private _changeState(user: any = null) {
        if (user) {
          this.isAuth = true;
          this.user = this._getUserInfo(user);
          this.router.navigate(['/']);

        }
        else {
          this.isAuth = false;
          this.user = {};
        }
      }

  private _getUserInfo(user: any): any {
    if (!user) {
      return {};
    }
    let data = user.auth.providerData[0];
    return {
      name: data.displayName,
      avatar: data.photoURL,
      email: data.email,
      provider: data.providerId
    };
  }

和渲染用户数据的模板：

<div *ngIf="userData.isAuth">
    <div  class="user-profile clearfix">
      <div  class="dropdown al-user-profile">

        <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown"
           aria-expanded="false">
          <img src="{{userData.user.avatar }}">
        </a>
     </div>
    </div>
    </div>
    <div *ngIf="!userData.isAuth" class="social-main">
      <a routerLink="/login" routerLinkActive="active">Login In</a>
    </div>