温馨提示:本文翻译自stackoverflow.com,查看原文请点击:angular - How to get and route the numbers of the otp from ng-otp-input using Ionic 4?
angular ionic-framework ionic4

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

发布于 2020-04-08 00:07:09

我在第1页然后使用第2页上的otp输入创建了数字密码表单,以确认密码。当我将密码从第1页路由到第2页时,我得到的密码值为undefined,因为它是字符串,所以无法将其修改为数字。如何获取输入到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();
}


}

查看更多

提问者
mos
被浏览
141
Aziz Yokubjonov 2020-02-01 05:32

查看您的代码,似乎在您的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);