提问人:Greggz 提问时间:11/16/2023 更新时间:11/21/2023 访问量:65
Angular:在html中切换状态的最佳方式是什么 display [已关闭]
Angular what's the best way to switch states in html display [closed]
问:
必须决定两种不同的方法来处理加载之间的组件视图。通过“最好的方式”,我说的是性能,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 的闪烁次数更少。
我能就此发表意见吗?
答:
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 无论哪种方式都不支持连续的数据流,对我来说感觉更简单
评论