Angular: 如何防止组件模板同时闪烁两个条件语句？

Question

我试图阻止我的组件模板在组件初始化后条件发生变化时同时闪烁两个条件语句。

我的应用程序收到一个令牌，并根据其有效性在模板中显示必要的内容。问题是令牌被发送到 API 并且在它响应之前组件已经初始化因此采用默认布尔值。如果令牌有效，则布尔值为真，因此模板会显示两个条件语句一秒钟，然后隐藏 else 语句。

// template.html
<ng-container *ngIf="isTokenValid; else tokenIsInvalid">
  Token is valid content...
</ng-container>
<ng-template #tokenIsInvalid>
  Token is invalid content...
</ng-template>


// component.ts
...
isTokenValid: boolean = false; // Initialized to false by default
...
ngOnInit(){
  // Subscribe to the auth service to validate the provided token
  this.authService.validateToken(token).subscribe((res: any) => {
    if (res.success) { // If the API call was successful
      this.isTokenValid = true; // The token is valid so we change the boolean
      ...
    }
  });
}

期望的结果是组件模板等待API调用完成，然后根据最终的布尔值显示正确的内容。

Answer 1

我的很多项目都使用这种模式

ts:

loading: boolean = false;

ngOnInit() {
  loading = true;
  // do something
  // when finished doing something
  loading = false;
}

html:

<div *ngif="!loading">
<!-- wrap around content -->
</div>

我还使用了一个加载图标，它会在加载发生时显示...这样用户就不会好奇为什么没有任何显示...这有帮助吗？如果不告诉我。

Angular: 如何防止组件模板同时闪烁两个条件语句？

Angular: How to prevent component template from flashing both conditional statements?

javascript

angular

angular-ng-if

angular8

rxjs-subscriptions