Angular 按顺序将参数从一页传递到另一页

我想把参数从注册页面传递到注册页面。在我的注册otp页面中，otp未被识别，因为参数（电子邮件和手机）未传递到注册otp页面。我的backedn编码类似于otp验证参数（mobile、email、otp）应该被验证。因此它不能正常工作。我试图在注册页面中初始化我的数据，并将其传递到注册页面。但不起作用。如何做到这一点

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

});
}
}

服务台

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

SignupUser（用户）：可观察{
console.log（用户）；
log（'从用户获取注册数据'）；
返回this.http.post（`this.base\u url}/signup`，user）；
}
Verifysignupotp（用户）：可观察{
console.log（用户）；
log（'从服务器获取所有列表'）；
返回this.http.post（`${this.base_url}/verifysignupotp`，user）；
}

在路由url上传递参数的方式有如下几种：

此.router.navigate[“path”，param]

在app-routing.module.ts中，您必须编写如下内容：

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

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

在您的情况下，我将在您的service.ts中创建一个名为

user

的对象。 当您在注册组件/页面中获得数据时，您可以将其写入service.ts上的

user

对象

---

导航到singupotp页面/组件后，您可以从服务读取数据，并可能使用其他数据扩展对象。

可能需要知道的是，当您通过路由传递参数时，所有数据都可以在用于ionic的urlNo组件中以纯文本形式显示。该页面在ionic中使用。如何在Ionic中做到这一点您仍然使用Ionic中的组件，即使它们被命名为page。无论如何，路由导航的工作原理是一样的，服务的策略并不取决于它是一个组件还是什么不同。我目前正在处理一个Ionic项目，对于组件之间的通信，我更喜欢将服务与rxjs Observices结合使用。我想将电子邮件和移动到OTP页面传递给正在验证。但它显示错误。您可以使用事件库进行实时更新。检查：