CODEWITHSUNDEEP
angulartypescriptionic3
Andres Toledo
Andres Toledo

Reputation: 33

how can i get a data of a page to other page in ionic3

i was making a program but in a page i need some datas to use, so i made functions in a page to return datas of a page to other page, i have this error: 

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[NavController]: 
                  StaticInjectorError[NavController]: 
                    NullInjectorError: No provider for NavController!

i was researching but i dont find the problem or something similar to resolve the error.

The question is if I can get data from other pages with a function? I have attempted to do this with the code below, but I am not sure if what I am attempting is possible

The code is very simple just use 2 pages and the app.module.ts

This is the code:

this is the page where i get the data from the functions:

            import { Component, ViewChild } from '@angular/core';
            import { IonicPage, NavController, NavParams } from 'ionic-angular';
            import { CantidadPage } from '../cantidad/cantidad';

            @IonicPage()
            @Component({
              selector: 'page-rutinaejercicio',
              templateUrl: 'rutinaejercicio.html',
            })

            export class RutinaejercicioPage {
              @ViewChild('myNav') nav: NavController 
     // here i declared two vars
              email;
              dia;
              constructor(public navCtrl: NavController, public navParams: NavParams,cant:CantidadPage) {

            // in this part of the construct i use the that i declared 2 vars to get datas of the functions of the other page
                 this.email = cant.getEmail();
                console.log(this.email)
                 this.dia = cant.getDia();
                console.log(this.dia);
              }
            }

            // this is the page where i send datas of functions:

            import { Component, ViewChild } from '@angular/core';
            import { IonicPage, NavController, NavParams } from 'ionic-angular';
            import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
            import { AlertController } from 'ionic-angular';
            import { Observable } from 'rxjs/Observable';
            import 'rxjs/add/operator/map';
            import { Injectable } from '@angular/core';
            import { EjerciciosPage } from '../ejercicios/ejercicios';


            @IonicPage()

            @Component({
              selector: 'page-cantidad',
              templateUrl: 'cantidad.html',
            })

            export class CantidadPage {

             @ViewChild('appNav') nav: NavController;
              dia;
              email;
             constructor(public navCtrl: NavController, public navParams: NavParams,private afs: AngularFirestore,
                public alertCtrl: AlertController) {    
                  this.email = this.navParams.get('email');
                  console.log("email5:"+this.email);
                  this.dia = this.navParams.get('dia');
                  console.log('aqui es:'+this.dia);
                  this.item = this.navParams.get('item');
                  console.log('aqui ejercicio:'+this.item);
              }

there are the functions where i send the information of the other page

With this function i get the day to the other page

          public getDia(){
            return this.dia;
          }

With this function i get the email of the other page

public getEmail(){
  return this.email;
  }

app.module.ts: i was put the page where was the functions in providers but the error was the same

            import { NgModule } from '@angular/core';
            import { BrowserModule } from '@angular/platform-browser';
            import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
            import { MyApp } from './app.component';

            import { AboutPage } from '../pages/about/about';
            import { ContactPage } from '../pages/contact/contact';
            import { HomePage } from '../pages/home/home';
            import { TabsPage } from '../pages/tabs/tabs';

            import { StatusBar } from '@ionic-native/status-bar';
            import { SplashScreen } from '@ionic-native/splash-screen';
            import { FirebaseDataProvider } from '../providers/firebase-data/firebase-data';
            import { AngularFireModule } from "angularfire2";
            import {FIREBASE_CONFIG} from "./app.firebase.config";
            import {AngularFireAuthModule} from "angularfire2/auth";
            import { CosasService } from '../services/cosas.service';
            import { VistaPage } from '../pages/vista/vista';
            import { VistaRecoPage } from '../pages/vista-reco/vista-reco';
            import { EjerciciosPage } from '../pages/ejercicios/ejercicios';
            import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
            import { AngularFirestoreModule } from 'angularfire2/firestore';
            import { EjerciciosPageModule } from '../pages/ejercicios/ejercicios.module';

            import { CantidadPage } from '../pages/cantidad/cantidad';
            import { RutinaejercicioPage } from '../pages/rutinaejercicio/rutinaejercicio';

            import { RutinaPage } from '../pages/rutina/rutina';
            import { RutinaPageModule } from '../pages/rutina/rutina.module';


            @NgModule({
              declarations: [
                MyApp,
                AboutPage,
                ContactPage,
                HomePage,
                TabsPage,
                VistaPage,
                VistaRecoPage,  
                CantidadPage,
                RutinaejercicioPage,
                // RutinaPage

              ],
              imports: [
                BrowserModule,
                IonicModule.forRoot(MyApp),
                AngularFireModule.initializeApp(FIREBASE_CONFIG),
                AngularFireAuthModule,
                AngularFireDatabaseModule,
                AngularFirestoreModule.enablePersistence(),
                // AngularFirestoreModule,
                EjerciciosPageModule,
                RutinaPageModule,
                // CantidadPage
                // IonicPageModule.forChild(CantidadPageModule),

              ],
              bootstrap: [IonicApp],
              entryComponents: [
                MyApp,
                AboutPage,
                ContactPage,
                HomePage,
                TabsPage,
                VistaPage,
                VistaRecoPage,
                EjerciciosPage,
                RutinaejercicioPage,
                CantidadPage,
              ],
              providers: [
                StatusBar,
                SplashScreen,
                FirebaseDataProvider,
                CosasService,
                AngularFireDatabase,     
          Here i add the page wehere are the functions
                CantidadPage
              ]
            })
            export class AppModule {}

I don't know if the problem is in the app.module.ts or maybe i need make provider the page where are the function, if you know how resolve the error please help me :)

Upvotes: 1

Views: 68

Answers (1)

Okyam
Okyam

Reputation: 730

The way that I pass values from one page to another is this one

Main Page

    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import {SecondPage} from '../../page';

    @Component({
      selector: 'main',
      templateUrl: 'main.html',
    })
    export class Main {

      constructor(private nav: NavController) {}

   private goToSecondPage(){

      var object = {"name": "Pedro", "edad":23}

      this.nav.push(SecondPage,object);

    }

    }

Second Page

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
  selector: 'second',
  templateUrl: 'second.html',
})

export class SecondPage {

 private dataObject = {};

  constructor(private params: NavParams) {

    this.dataObject = params.data;

  }

}

As you can see Im using the navController to navigate to the second page using the push method, this method let me send the page and params as optional parameter.

And to retrieve the object passed, i used navParams this one let me retrieve params injected to the second page.

In resume if you call the method "goToSecondPage" from button located in the main page, you will be able to navigate to second page and retrieve the object from main page to second page.

Upvotes: 1

Related Questions