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

Question

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

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

你总是可以 JSON.stringify object/array 到 routerParams，我认为这不太方便。

在 Ionic 4 中，您可以使用 ComponentProps 和 @Input() 通过 modalController 传递数据，使其更适合快速 push/pop 实施。

编辑

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

目标是充分利用 ionic 和 angular 的 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.

传递数据的方法

在您的离子项目上创建一个服务，或者您也可以对 Angular 项目执行相同的步骤（只有命令会改变）：

  $ ionic generate provider <any name>

将此代码放入您的服务 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);
    }
  }

在两个页面上导入服务，从哪里获取数据和从哪里获取数据。像这样。

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

  constructor(
    private userServ: UserService,
  ) {}

像这样设置你的数据：

  this.userServ.changeData(responceData.data);

像这样获取数据：

  sentData: any;

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

这对我有用。

Answer 3

我从第一个测试版开始就一直在使用 Ionic 4，但我还没有找到您要找的东西。我相信 Ionic 团队想把组件交互的任务交给组件框架（Angular、React、Vue...）。

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

Answer 4

您可以使用 queryParams 通过 route 简单地传递 object。

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

要接收这个 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'
                 }
                }

要发送上面的 object 你需要先 stringify 在 [=54= 的帮助下对象]().

   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()[=解析此对象40=]方法。

import { ActivatedRoute } from '@angular/router'; constructor(public activatedRoute : ActivatedRoute,) { this.activatedRoute.queryParams.subscribe((res)=>{ console.log(JSON.parse(res.value)); }); }

Answer 5

我已经解决了

您可以使用 JSON.stringify.

简单地通过路由传递对象数据

this.router.navigate(['namepage',JSON.stringify(data)]);

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

items: any;

this.items = JSON.parse(this.activatedRoute.snapshot.paramMap.get('id'));

为了可视化数据，我们附加了保存数据的字段名称

this.idxxx = this.items.namefield;

你必须先在app.routing.module.ts

中定义参数

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'namepage/:id', loadChildren: './pages/page/page.module#pagePageModule' },
];

希望对你有帮助，这确实是最简单的方法

Answer 6

在 Ionic v4 / Angular 7.2+:

中有多种方法可以将参数从一个页面传递到另一个页面

1.使用附加状态（自 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.使用查询参数（不推荐）

通过 stringyfing 你的对象：查看@Tahseen Quraishi 的回答

能传递的信息很少，而且URL很丑

Some examples here

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

Ionic 4 - how to pass data between pages using navCtrl or Router service

angular-routing

ionic-framework

angular

ionic4