Question

我正在使用离子4。它不接受使用navparams接收数据。这是我的发件人页面方法：

  //private route:Router
  gotoFinalView(intent) {
    this.route.navigateByUrl(`${intent}`, this.destination);
  }

收件人页面行；

  //private navParams:NavParams  
  this.destination = navParams.data;

在ionic 4中执行此操作的正确方法是什么？我也不确定gotoFinalView方法是否有效。

Answer 1

这是我解决问题的方式：

我创建了具有setter和getter方法的服务；

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class MasterDetailService {
  private destn: any;
  constructor() {}

  public setDestn(destn) {
    this.destn = destn;
  }

  getDestn() {
    return this.destn;
  }
}

在第一页中插入Service和NavController并将其用作；

  gotoFinalView(destn) {
    this.masterDetailService.setDestn(destn);
    this.navCtrl.navigateForward("destn-page");
  }

在最后一页提取数据；

constructor(
    private masterDetailService: MasterDetailService
  ) {
    this.destination = this.masterDetailService.getDestn();
  }

Answer 2

这是解决问题的有效方法您的应用程序中的用户角度路由器概念。只需像下面这样声明您的路由器

您的应用程序路由模块如下

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ViewComponent} from "./crud/view/view.component";
import {CreateComponent} from "./crud/create/create.component";  
import {UpdateComponent} from "./crud/update/update.component";
import {ReadComponent} from "./crud/read/read.component";

const routes: Routes = [
{path: '', component: ViewComponent},
{path: 'create', component: CreateComponent},
{path: 'update/:id', component: UpdateComponent},
{path: 'view/:id', component: ReadComponent}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

：id是我要发送到该页面的参数。

 this.router.navigate([link + '/' + id]);

在首页上像这样分享您的参数。

在第二页中，使用DI（依赖关系注入）注入已激活的路由

constructor(private actRoute: ActivatedRoute)

然后使用以下代码获取参数

this.productID = this.actRoute.snapshot.params['id'];

这是简单的方法。您可以一次发送多个参数。

{path: 'update/:id/:name/:price', component: UpdateComponent}

并获得如下所示的参数

this.productID = this.actRoute.snapshot.params['id'];
this.productName = this.actRoute.snapshot.params['name'];
this.productPrice = this.actRoute.snapshot.params['price'];

Answer 3

在路由时，您可以这样写：

this.router.navigate(["/payment-details",{
  prev_vehicle_type: this.vehicle_type,
      prev_amt: this.amt,
      prev_journey:this.whichj
}]);

要在下一页获取此参数，您可以编写：

constructor(
public router: Router,
public activateroute: ActivatedRoute){
this.activateroute.params.subscribe((data: any) => {
  console.log(data);
  this.vehicle_type = data.prev_vehicle_type;
  this.amt = data.prev_amt;
  this.whichj = data.prev_journey;

});
}

Answer 4

带有参数的ionic 4导航

发件人页面 1.导入以下

import {NavController} from '@ionic/angular';
import { NavigationExtras } from '@angular/router';

构造函数（私有navCtrl：NavController）
发件人页面

gotonextPage（）

gotonextPage()
{
let navigationExtras: NavigationExtras = {
          state: {
            user: 'name',
            parms:Params
          }
        };
        this.navCtrl.navigateForward('pageurl',navigationExtras);
}

4。收件人页面

import { ActivatedRoute, Router } from '@angular/router';
constructor( private route: ActivatedRoute, private router: Router)
{
this.route.queryParams.subscribe(params => {
  if (this.router.getCurrentNavigation().extras.state) {
    this.navParams = this.router.getCurrentNavigation().extras.state.parms;
  }});
}

Answer 5

使用路由器服务发送数据，并使用全局变量历史记录

提取

//发件人

  // private router: Router
  nextPage() {
    this.router.navigate(['history'],
      { state: [{ name: "covid-19", origin: "china" },{ name: "ebola", origin: "us" }] }
    )
  }

//收件人页面

  ngOnInit() {
  let data = history.state;
  console.log("data-->",data);
// ** data** 
//0:{name: "covid-19", origin: "china"} 1: {name: "ebola", origin: "us"} navigationId: 2
  }

Answer 6

要发送的项目，图标和标题变量应以这种方式写在状态中。

this.nav.navigateForward('/myUrl', {
        state: {
          'items': this.substances,
          'icon': ICONS.substance,
          'title': 'Etken Maddeler'
        }
      });

我们以这种方式获取传入变量。

//receive
constructor(
      protected route: ActivatedRoute,
      protected router: Router,
  ) {
    this.selectedItem = null;
    this.route.paramMap.subscribe(params => {
      let st = this.router.getCurrentNavigation().extras.state;
      if (st) {
        this.selectedItem = st.items;
      }
    });
  }

Answer 7

非常简单，您可以执行以下操作：

在“呼叫屏幕”中：

this.router.navigate(['url', {model: JSON.stringify(myCustomObject)}])

在“被叫屏幕”中：

this.myvar = JSON.parse(this.activatedRoute.snapshot.paramMap.get('model')

等等！

Answer 8

//in home.ts
import{ Router,ActivatedRoute, NavigationExtras }         from '@angular/router';
getProductStatics(productObject : any) {
    var object1 = {
            id: productObject, 
        }
    const navigationExtras: NavigationExtras = {state : {object: 
    JSON.stringify(object1)}};
    this.router.navigate(["/product-statics"], navigationExtras);
}
//in product-statics.ts

import{ Router,ActivatedRoute,NavigationExtras }         from '@angular/router';
if(self.router.getCurrentNavigation().extras.state) {
                 var object1 
       =  this.router.getCurrentNavigation().extras.state.object;
                var object  = JSON.parse(object1);
          var newObjectData    = object.id;      
 }

Ionic 4. NavParams的替代品

8 个答案: