Angular:在html中切换状态的最佳方式是什么 display [已关闭]

Angular what's the best way to switch states in html display [closed]

提问人:Greggz 提问时间:11/16/2023 更新时间:11/21/2023 访问量:65

问:


想改进这个问题吗?更新问题,以便可以通过编辑这篇文章来用事实和引文来回答。

3天前关闭。

必须决定两种不同的方法来处理加载之间的组件视图。通过“最好的方式”,我说的是性能,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 的闪烁次数更少。

我能就此发表意见吗?

HTML 角度 dom

评论


答:

0赞 IP.AF 11/16/2023 #1

您可以在 routerOutlet 上使用 angularAnimations。 有关完整说明,请访问此页面。角度布线动画

Angular 动画非常快,它们被转换为 CSS 过渡。

评论

0赞 Greggz 11/16/2023
轻描淡写地阅读,这似乎是页面之间的交易。我说的是关于数据加载的同一页面上的翻译。虽然有用,但似乎并没有解决我的观点。
0赞 JineappleAra 11/16/2023 #2

我怀疑在性能或眨眼方面是否有有意义的差异。使用 promise 方法,你可能会有多个订阅,但与其他方面相比,对性能的影响应该可以忽略不计。

有关已更改变量的信息将在同一循环中到达,并将导致相同数量的渲染更改。

在开发时选择更适合您/更易于阅读的方法。其余的似乎只是过早的优化。

0赞 Greggz 11/20/2023 #3

Css 加载似乎只有在组件渲染一段时间后才会生效,目前使用选项 1 我可以看到一开始,然后 http 调用才会到达并计算是否有字母。 因此,我不会依赖 css,而是在选项 2 中采用承诺。No letters to be shown

0赞 Eliseo 11/20/2023 #4

为什么这是使用 Promise 的原因?

使用 Observables 时更好的方法

<div *ngIf="{letters:observable$|async} as data">
  <div *ngfor="let letter in data.letters">
    {{letter}}
  </div>
  <div *ngIf="!data.letters.length">
     No letters to be shown
  </div>
</div>

在 Angular 17 中使用新语法

@if (observable$|async; as letters) { 
  @for (letter of letters; track $index) {
    {{ letter }} } 
  @empty { 
    No letters to be shown 
  } 
}@else { 
  loading 
}

评论

0赞 Greggz 11/21/2023
因为在我当前的场景中,我不使用 Observables,所以我使用 lastValueFrom(Observable)。对于大多数简单的 CRUD 调用,这就是我的处理方式,因为 Http 无论哪种方式都不支持连续的数据流,对我来说感觉更简单