Ionic 4 - 如何使用navCtrl或Router服务在页面之间传递数据

Question

在Ionic 3中，您可以使用navController的第二个参数将数据传递到下一页并使用navParams服务检索它。

这是一个非常方便的功能。在Ionic 4中是否有等效的路由api？

你总是可以JSON.stringify对象/数组到routerParams，这在我看来不太方便。

在Ionic 4中，您可以使用ComponentProps和@Input（）通过modalController传递数据，使其更适合快速推送/弹出实现。

编辑

我对这个问题的意图是找出是否有来自Angular 6+或Ionic 4+的原生API。我很清楚如何实现自定义服务或解析器来实现此目的。

目标是充分利用离子和角度api，因为在较大的项目中，每个自定义代码都需要文档并增加复杂性。

Answer 1

我已经通过将Ionic NavController包装在一个提供程序中来解决这个问题，该提供程序具有将值设置为变量的函数和一个再次获取它的函数。与this.navParams.get('myItem')相似。

看看以下内容;

import { Injectable } from '@angular/core';
import { NavController } from '@ionic/angular';

@Injectable()
export class Nav {
    data: any;

    constructor(public navCtrl: NavController) {
        // ...
    }

    push(url: string, data: any = '') {
        this.data = data;

        this.navCtrl.navigateForward('/' + url);
    }

    pop(url) {
        this.navCtrl.navigateBack('/' + url);
    }

    get(key: string) {
        return this.data[key];
    }
}

希望这可以帮助！

Answer 2

实际上，有很多方法可以在页面之间传递数据。我试过Route和navCtrl但是，它对我不起作用。我正在分享使用SERVICE传递数据的方法。

1. 在离子项目上创建服务，或者也可以对Angular项目执行相同的步骤（仅命令将更改）：

  $ ionic generate provider <any name>

2. 将此代码放在您的服务TS文件上。

  import { Injectable } from "@angular/core";
  import { map } from "rxjs/operators";
  import { BehaviorSubject } from "rxjs";  

  @Injectable({ providedIn: "root" })

  export class <your_class_name_here> {
    constructor() {}

    private dataSource = new BehaviorSubject("default message");
    serviceData = this.dataSource.asObservable();

    changeData(data: any) {
      this.dataSource.next(data);
    }
  }

3. 在两个页面上导入服务，从中获取数据以及从何处获取数据。像这样。

  import { UserService } from "./../services/user.service";

  constructor(
    private userServ: UserService,
  ) {}

4. 像这样设置你的数据：

  this.userServ.changeData(responceData.data);

5. 得到这样的数据：

  sentData: any;

  ngOnInit() {
    this.userServ.serviceData
      .subscribe(data => (this.sentData = data));
    console.log("sent data from login page : ", this.sentData);
  }

这对我有用。

Answer 3

您可以使用queryParams简单地使用路径传递对象。

import { Router } from '@angular/router';

      object = {
            name: 'subham',
            age: '34',
            address: '34 street, Delhi, India'
            }

      constructor(public router : Router) {}

            onGoToNextPage(){
            this.router.navigate(['/pageName'],{
            queryParams: this.object,
            });
          }

要接收此对象，您需要使用ActivatedRoute，它将从'@ angular / router'导入

import { ActivatedRoute } from '@angular/router';


 constructor(public activatedRoute : ActivatedRoute,) { 

                this.activatedRoute.queryParams.subscribe((res)=>{
                  console.log(res);
              });
              }

如果您的对象结构很复杂。

假设您有以下对象发送。

object = {
                name: 'subham',
                age: '34',
                address: '34 street, Delhi, India'
                favourite_movie: ['dhoom','race 2','krishh'],
                detail : {
                  height: '6ft',
                  weight: '70kg'
                 }
                }

要发送上述对象，您需要首先在JSON.stringfy（）的帮助下对对象进行字符串化。

   import { Router } from '@angular/router';

          object = {
                    name: 'subham',
                    age: '34',
                    address: '34 street, Delhi, India'
                    favourite_movie: ['dhoom','race 2','krishh'],
                    detail : {
                      height: '6ft',
                      weight: '70kg',
                     }
                    }

          constructor(public router : Router) {}

                onGoToNextPage(){
                this.router.navigate(['/pageName'],{
                queryParams: {
                   value : JSON.stringify(this.object)
                  },
                });
              }

要接收此对象，您需要使用JSON.parse（）方法解析此对象。

import { ActivatedRoute } from '@angular/router';


 constructor(public activatedRoute : ActivatedRoute,) { 

                this.activatedRoute.queryParams.subscribe((res)=>{
                  console.log(JSON.parse(res.value));
              });
              }

Answer 4

自从第一次测试以来我一直在使用Ionic 4，但我还没找到你想要的东西。我相信Ionic团队希望将组件交互的任务留给组件框架（Angular，React，Vue ......）。

如果要降低复杂性，可以使用Angular服务，redux或ngrx进行应用程序的状态管理。这样，您可以导航到视图，通过操作更新全局状态，然后返回上一个视图并显示更新的状态。