Angular 如何使用Ionic 4从ng otp输入获取和路由otp的编号？

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

页面1.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>

页面2.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>

---

查看您的代码，您的页面1似乎从未设置

val

的值，因此未定义的值通过路由器发送。
假设要将OTP值发送到第2页，则应将第1页中的

onOtpChange

方法修改为以下内容：

onotp变更（otp）{
如果（otp.length==6）{
this.router.navigateByUrl（'/page2/'+otp）；
}
}

现在，在路由器中（假设page2 route path类似于

page2/：val

），当您记录route param值时，您应该会看到它正确显示：

const val=this.activatedRoute.snapshot.paramMap.get（“val”）；
控制台日志（val）；

您可以添加路由器的一个片段吗？您是如何在您的ionic页面中使用ng otp输入模块的？我不断收到错误“如果ng otp输入是一个web组件，那么在“@NgModule”中添加“CUSTOM_ELEMENTS_SCHEMA”

<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>

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();
}


}