首页 新闻 赞助 找找看

angular: 二维码组件 angularx-qrcode 如何显示加载动画

0
悬赏园豆:50 [已解决问题] 解决于 2023-03-20 21:10

为了更好的用户体验,想在二维图片显示出来之前先显示加载动画,请问如何实现?

使用的二维码组件是 angularx-qrcode

dudu的主页 dudu | 高人七级 | 园豆:31075
提问于:2023-03-20 11:55
< >
分享
最佳答案
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
没有烟抽的日子 | 菜鸟二级 |园豆:260 | 2023-03-20 15:03

this.loaded = true; 不会隐藏 mat-spinner

dudu | 园豆:31075 (高人七级) | 2023-03-20 19:28

angularx-qrcode 没有 loaded 事件,只有 qrCodeURL 事件

dudu | 园豆:31075 (高人七级) | 2023-03-20 20:03

将事件改为 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;
    }
  }
}
dudu | 园豆:31075 (高人七级) | 2023-03-20 21:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册