Question

我正在制作一个程序，但是在页面中我需要一些数据才能使用，所以我在页面中创建函数将页面的数据返回到其他页面，我有这样的错误：

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

我正在研究，但我没有找到问题或类似的东西来解决错误。

问题是我是否可以通过其他功能从其他页面获取数据？我试图使用下面的代码执行此操作，但我不确定我尝试的是否可能

代码非常简单，只需使用2页和app.module.ts

这是代码：

这是我从函数中获取数据的页面：

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

有我发送另一页信息的功能

使用此功能，我可以将这一天带到另一页

          public getDia(){
            return this.dia;
          }

使用此功能，我会收到另一页的电子邮件

public getEmail(){
  return this.email;
  }

app.module.ts：我把页面放在提供程序中的函数，但错误是相同的

            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 {}

我不知道问题是在app.module.ts中还是我需要make provider这个函数的页面，如果你知道如何解决这个错误请帮帮我:)。

Answer 1

我将值从一个页面传递到另一个页面的方式就是这个

主页

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

    }

    }

第二页

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;

  }

}

正如您所见，我使用navController使用push方法导航到第二页，此方法允许我将页面和参数作为可选参数发送。

要检索传递的对象，我使用navParams这个让我检索注入第二页的params。

如果你调用方法＆＃34; goToSecondPage＆＃34;从位于主页面的按钮，您将能够导航到第二页并从主页面检索对象到第二页。

如何在ionic3中获取页面数据到其他页面

1 个答案: