我在第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();
}
}
查看您的代码,似乎在您的Page1中您从未设置过的值val
,因此未定义的值通过路由器发送。
假设要将OTP值发送到Page2,则应将onOtpChange
Page1中的方法修改为以下内容:
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);