在 angular 离子中将参数从一页传递到另一页

Question

I want to pass params from signup page to signupotp page. In my signupotp page otp is not getting recognised because of the params (email and mobile)is not getting passed to signupotp page. My backedn is coded like for otp verification params (mobile,emaail,otp) should be verified.So its not getting working properly. I tried to initialise my data in signup page and passed to signupotp page.But not working. How to do this?

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(['/']);
}

});
}
}

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

There are ways in angular to pass parameters over the url of the route like this: this.router.navigate[‚path', param] In your app-routing.module.ts you have to write something like this:

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

Or you just write the parameters on some variables in your signup Service and read them from wherever you want to use them.

In your case I would create a object called user in your service.ts. When you get the data in your signup Component/Page you write it on the user Object at your service.ts After navigating to your singupotp Page/Component you can read the data from the service and maybe extend the object with some other data.