以角度离子将参数从一页传递到另一页

Question

我想将参数从注册页面传递到 signupotp 页面。在我的 signupotp 页面中，由于参数（电子邮件和移动设备）未传递到 signupotp 页面，因此无法识别 otp。我的 backedn 编码为 otp 验证参数（移动、电子邮件、otp）应该被验证。所以它不能正常工作。我试图在注册页面中初始化我的数据并传递给 signupotp 页面。但没有工作。如何做到这一点？

SIGNUP.PAGE.TS

import { Component, OnInit } from '@angular/core';
import {ApiService} from '../api.service';
import{Router} from '@angular/router';
import { FormsModule } from '@angular/forms';
import {SignupotpPage} from '../signupotp/signupotp.page';

@Component({
selector: 'app-signup',
templateUrl: './signup.page.html',
styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {

Mobile:any;
Email:any;
data:any;
otp:any;
checked:any;


constructor(private api:ApiService,private router:Router,public signupotp:SignupotpPage) {}

ngOnInit() {
}

Continue(Mobile,Email){
const user= {
Mobile:Mobile,
  Email:Email
}
console.log(Mobile);
console.log(Email);

this.api.SignupUser(user).subscribe(data=>{
console.log(data);
this.signupotp.initialisedata(Mobile,Email);
this.router.navigate(['signupotp']);

});
}
}

SIGNUPOTP.PAGE.TS

import { Component, OnInit } from '@angular/core';
import {ApiService} from '../api.service';
import{Router} from '@angular/router';
@Component({
selector: 'app-signupotp',
templateUrl: './signupotp.page.html',
styleUrls: ['./signupotp.page.scss'],
})
export class SignupotpPage implements OnInit {

Mobile:any;
Email:any;
otp:any;
data:any;

constructor(private api:ApiService,private router:Router) {


}
initialisedata(email,mobile)
{
console.log("HUUUU");
console.log(email,mobile);
this.Email = email;
this.Mobile = mobile; 
}
ngOnInit() {
}



Confirm(otp){
const user= {
otp:otp,
mobile:this.Mobile,
email:this.Email
}
console.log(otp); 
console.log("hey how are you")


this.api.Verifysignupotp(user).subscribe(data=>{
console.log(data);
this.data =  data;
if(this.data.Msg)
{
alert(this.data.Msg);
}
else
{
this.router.navigate(['/']);
}

});
}
}

服务.ts

SignupUser(user):Observable<Object>{
console.log(user);

console.log('getting the signup data from user');
return this.http.post<Object>(`${this.base_url}/signup`,user);

}

 Verifysignupotp(user): Observable<Object>{
    console.log(user);
    console.log('getting all Listing from the server');
    return this.http.post<Object>(`${this.base_url}/verifysignupotp`,user);
  }

Answer 1

在 Angular 中有多种方法可以通过路由的 url 传递参数，如下所示：this.router.navigate[‚path‘, param] 在您的 app-routing.module.ts 中，您必须编写如下内容：

export const routes: Routes = [
  { path: 'path/:param', component: yourComponent }
];

或者你只是在你的注册服务中的一些变量上写参数，然后从你想使用它们的任何地方读取它们。

在您的情况下，我将在您的 service.ts 中创建一个名为 user 的对象。 当您在注册组件/页面中获取数据时，您将其写入 service.ts 的 user 对象 导航到您的 singupotp 页面/组件后，您可以从服务中读取数据，并可能使用其他数据扩展对象。