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 v4 / Angular 7.2+ 中有多种方法可以将参数从一个页面传递到另一个页面：

1. 使用 Extras State（自 Angular 7.2 以来的新功能） - 推荐

简单干净

// original page
let navigationExtras: NavigationExtras = { state: { foo: this.foo } };
this.router.navigate(['destination-path'], navigationExtras);
// destination page
constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.foo= this.router.getCurrentNavigation().extras.state.foo;
      }
    });
  }

2. 使用服务和解析器

不影响数据但有点重。

将数据存储到服务中并使用路由器传递解析器

3.使用对象的id（不推荐）

如果您的对象已存储，您可以在 url 中传递 id 并再次获取它。

它会减慢应用程序的速度，暗示该对象存储在某处并可能增加网络问题（如果未在本地存储）

4. 使用查询参数（不推荐）

通过对您的对象进行字符串化：请参阅@Tahseen Quraishi 的回答

只能传递很少的信息，URL很可怕

这里有一些例子

Answer 2

我已经通过将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 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,
            });
          }

要接收此对象，您需要使用从“ @ angular / router”导入的ActivatedRoute

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

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

1. 在您的 ionic 项目上创建一个服务，或者您也可以对 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);
  }

这对我有用。