angular: 二维码组件 angularx-qrcode 如何显示加载动画
0
悬赏园豆：50
[已解决问题]
解决于 2023-03-20 21:10
为了更好的用户体验，想在二维图片显示出来之前先显示加载动画，请问如何实现？
使用的二维码组件是 angularx-qrcode
最佳答案
0
如果你要在二维码图片显示出来之前，添加一个加载动画，可以使用 Angular 自带的 ngIf 指令和样式来实现。
首先，在 HTML 模板中，在二维码图片标签上加上一个 ngIf 指令，用来判断是否显示加载动画，如下所示：
<div *ngIf="!loaded">
<mat-spinner></mat-spinner>
</div>
<qrcode [qrdata]="data" [size]="size" [level]="'M'" (loaded)="onImageLoad()">
</qrcode>
其中，mat-spinner 是 Angular Material 库提供的加载动画组件，可以在需要显示加载动画时使用。loaded 是 angularx-qrcode 库提供的一个事件，表示图片加载完成后触发的事件，可以用来关闭加载动画。
接着，在组件中定义一个 loaded 变量，当加载完成时把它设为 true，同时在 onImageLoad() 方法中添加逻辑：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
data = 'https://example.com';
size = 256;
loaded = false;
onImageLoad() {
this.loaded = true;
}
}
最后，在 CSS 文件中添加样式，当二维码图片未加载完成时，隐藏二维码图片，显示加载动画：
qrcode {
display: none;
}
div[ngIf]:not(.ng-trigger) + qrcode {
display: block;
}
其中，:not(.ng-trigger) 是排除 Angular 动画类名的样式，避免影响到加载动画的显示。
收获园豆：50
this.loaded = true; 不会隐藏 mat-spinner
angularx-qrcode 没有 loaded 事件，只有 qrCodeURL 事件
将事件改为 qrCodeURL 解决了，实现代码如下
payment-wechat.component.html
<div class='qrcode-container'>
<div>
<div *ngIf="!loaded">
<mat-spinner></mat-spinner>
</div>
<div [ngStyle]="{'display': (loaded?'block':'none')}">
<qrcode [qrdata]="paymentUrl" [allowEmptyString]="true" [width]="300" errorCorrectionLevel='high' elementType='svg' [margin]='0' (qrCodeURL)="onChangeURL()"></qrcode>
</div>
</div>
</div>
payment-wechat.component.ts
export class PaymentWechatComponent implements OnInit {
loaded: boolean = false;
paymentUrl: string = '';
createPayment$ = new BehaviorSubject<void>(void 0);
constructor(private paymentService: PaymentService) { }
ngOnInit(): void {
this.createPayment$
.pipe(switchMap(_ => this.paymentService.createPayment()))
.subscribe(result => {
if(result.success && result.value) {
this.paymentUrl = result.value;
}
});
}
onChangeURL() {
if(this.paymentUrl) {
this.loaded = true;
}
}
}
