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>

Я также использую значок загрузки, который отображается, когда происходит загрузка... так что пользователю не интересно, почему ничего не отображается... это помогает? если нет, дайте мне знать.