时间戳

首页 > 解决方案 > 如何使用 Ionic 4 从 ng-otp-input 获取和路由 otp 的编号？

angular - 如何使用 Ionic 4 从 ng-otp-input 获取和路由 otp 的编号？

问题描述

我在第 1 页使用 otp 输入创建了一个数字密码表单，然后在第 2 页创建了一个数字密码表单以确认密码。当我将密码从第 1 页路由到第 2 页时，我得到的密码值未定义，我无法将其修改为数字，因为它是一个字符串。如何获取我输入到 otp 中的数字以便能够将其路由到第二页？

page1.html

<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" 
                      *ngIf="showOtpComponent"  [config]="{length:6,inputClass:'dot',allowNumbersOnly:true}"></ng-otp-input>

                      <span *ngIf="otp" class="o-t-p"></span>

page1.ts

export class Page1 {


val: any;

otp: string;
showOtpComponent = true;
@ViewChildren('ngOtpInput') ngOtpInput: any;

  constructor(public router:Router) { }

  ngOnInit() {

  }


  onOtpChange(otp) {

    this.otp = otp;

    if (otp.length === 6) {

    this.router.navigateByUrl('/page2/' + this.val);

    }

    }

setVal(val) {
 this.ngOtpInput.setValue(val);
 }




  }

page2.html

<ng-otp-input #ngOtpInput (onInputChange)="onOtpChange($event)" 
                      *ngIf="showOtpComponent"  [config]="{length:6,inputClass:'dot',allowNumbersOnly:true}"></ng-otp-input>

                      <span *ngIf="otp" class="o-t-p"></span>

page2.ts

export class page2 {
  val2: any;
  val: string;
  otp: string;
  showOtpComponent = true;
  @ViewChildren('ngOtpInput') ngOtpInput: any;

  constructor(private activatedRoute: ActivatedRoute, private router: Router, public alertController: AlertController) { }


  ngOnInit() {
    this.val = this.activatedRoute.snapshot.paramMap.get("val");
    console.log(this.val);
  }
  onOtpChange(otp) {

    this.otp = otp;
    if (otp.length === 6) {

      this.compare();

      }

    }

setVal(val2) {
 this.ngOtpInput.setValue(val2);
 }





 compare(){
  if(this.val != this.val2){
    this.presentAlert();
  }
  else{
    this.router.navigateByUrl('/page3');
  }
 }
 async presentAlert() {
  const alert = await this.alertController.create({
    header: 'Incorrect Password!!',
    message: 'Please enter the correct password',
    buttons: ['OK']
  });

  await alert.present();
}


}

标签： angularionic-frameworkionic4

解决方案

查看您的代码，您似乎在 Page1 中从未设置 的值val，因此通过路由器发送了一个未定义的值。
假设您要将 OTP 值发送到 Page2，您应该将onOtpChangePage1 中的方法修改为以下内容： 

onOtpChange(otp) {
    if (otp.length === 6) {
        this.router.navigateByUrl('/page2/' + otp);
    }
}

现在，在您的路由器中（假设 page2 路由路径类似于page2/:val），当您记录路由参数值时，您应该会看到它正确显示：

const val = this.activatedRoute.snapshot.paramMap.get("val");
console.log(val);

推荐阅读