1

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

我的应用程序收到一个令牌，并根据它的有效性在模板中显示必要的内容。问题是令牌被发送到 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 调用完成，然后根据最终的布尔值显示正确的内容。

4

1 回答 1

1

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

ts：

loading: boolean = false;

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

html:

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

我还使用了在加载时显示的加载图标……这样用户就不会好奇为什么什么都没有显示……这有帮助吗？如果不让我知道。

于 2019-08-29T12:37:36.013 回答