web-dev-qa-db-fra.com

Ionic 4 - comment transmettre des données entre des pages à l’aide de navCtrl ou du service Routeur

Dans Ionic 3, vous pouvez utiliser le deuxième argument de navController pour transmettre des données à la page suivante et les récupérer avec le service navParams.

C'était une fonctionnalité très pratique. Existe-t-il une api équivalente pour le routage dans Ionic 4? 

Vous pouvez toujours JSON.stringify l'objet/tableau aux routerParams, ce qui à mon avis est moins pratique.

Dans Ionic 4, vous pouvez transmettre des données avec modalController à l'aide de ComponentProps et de @Input (), ce qui convient mieux à une implémentation rapide Push/Pop.

MODIFIER

Mon intention avec cette question est de savoir s’il existe des API natives de Angular 6+ ou Ionic 4+. Je connais bien les moyens d'implémenter un service personnalisé ou un résolveur pour accomplir cela.

L'objectif est d'utiliser les api ionic et angular au maximum, car dans les projets plus importants, chaque code personnalisé nécessite une documentation et augmente la complexité.

angularionic-frameworkangular-routingionic4
5
Han Che

J'ai résolu ce problème en enveloppant Ionic NavController dans un fournisseur doté de fonctions permettant de définir une valeur sur une variable et une fonction permettant de la récupérer. Similaire à this.navParams.get('myItem').

Jetez un oeil à ce qui suit:

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

J'espère que cela t'aides!

5
Adam Thoor

Je travaille avec Ionic 4 depuis la première version bêta et je n’ai pas trouvé ce que vous cherchiez. Je crois que l’équipe ionique veut laisser la tâche de l’interaction composant au cadre composant (Angular, React, Vue ...).

Si vous souhaitez réduire la complexité, vous pouvez utiliser les services angulaires, redux ou ngrx pour la gestion d’état de l’application. De cette façon, vous pouvez accéder à une vue, mettre à jour l'état global par une action, puis revenir à la vue précédente et afficher l'état mis à jour.

0
David Villamizar

En fait, il existe de nombreuses façons de transmettre des données entre les pages. J'ai essayé plus de Route et navCtrl mais, cela n'a pas fonctionné pour moi. Je partage un moyen de transmettre des données en utilisant SERVICE.

  1. Créez un service sur votre projet ionique ou vous pouvez également suivre les mêmes étapes pour le projet Angular (seule la commande va changer):
  $ ionic generate provider <any name>
  1. Mettez ces codes dans votre fichier de service 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);
    }
  }
  1. Importez le service sur les deux pages, à partir duquel vous prenez les données et où vous voulez les récupérer. comme ça.
  import { UserService } from "./../services/user.service";

  constructor(
    private userServ: UserService,
  ) {}
  1. Définissez vos données comme ceci:
  this.userServ.changeData(responceData.data);
  1. obtenez vos données comme ceci:
  sentData: any;

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

cela fonctionne pour moi.

0
Sushil

Vous pouvez transmettre les données à une autre page en utilisant navCtrl comme ceci

En page 1 

this.navCtrl.Push(page2,{item:'Data you want to send'});

En page 2 

constructor(public navCtrl: NavController, public navParams: NavParams) {
   this.value = navParams.get('item');
 }
0
Sivaramakrishnan