Angular 在 html 显示中切换状态的最佳方式是什么

Question

必须决定使用两种不同的方法来处理加载之间的组件视图。我所说的“最佳方式”是指性能、UI 更少的闪烁（更少的 DOM 渲染），无论你知道什么。

选项 1：使用加载变量在未准备好时隐藏内容

// .scss
<styles>
  .loading {
    visibility: hidden;
  }
</styles>

// .ts
this.loading = false;
this.service.getLetters().then(array => {
  this.loading = array.length === 0;
})

// .html
<div [ngClass]="{ 'loading': loading}">
  <div *ngFor="let letter in letters">
    {{letter}}
  </div>
  <div *ngIf="letters.length === 0">
    No letters to be shown
  </div>
</div>

选项2：使用promise在html之间切换

// .ts
noLetters: Promise<boolean>;
lettersPromise: Promise<Array>;
letters: Array;

this.lettersPromise = this.service.getLetters();
this.noLetters = this.lettersPromise.then(letters => letters.length === 0);

// .html
<div *ngIf="(noLetters | async) === false">
  <div *ngfor="let letter in letters">
    {{letter}}
  </div>
</div>
<div *ngIf="(noLetters | async)">
  No letters to be shown
</div>

选项 2 对我来说似乎更强大，因为它可以更灵活？而且我认为 UI 闪烁得更少..

我可以对此发表意见吗？

Answer 1

您可以在 routerOutlet 上使用 angularAnimations。 请访问此页面以获取完整说明。 角度路由动画

角度动画非常快，它们被转换为 CSS 过渡。