Question

我真的需要你的帮助。我正在研究ionic2。我想通过在app.html中编写代码来显示所有页面的离子扫描并显示但是当我应用＆＃39;（点击）＆＃39;在app.html代码中显示的div标签上，它给出了错误，例如没有NavController的提供程序！＆＃39;问题是我如何使用点击app中的div标签来导航多个页面（如CustomerListPage，OrderListPage）。

非常感谢任何帮助。

这是app.html

<ion-content scroll="false" >

  <div scroll="false" style="background:#fff; padding-bottom:55px;">
  <div>
    <p class="pslider">
      <ion-slides autoplay="" speed="50000">
        <ion-slide>

          <table width="100%" border="0">
            <tr>
              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="customerList()"  style="padding-left:5px; padding-right:5px; margin-bottom:-10px;" >
                  <b><img src="assets/images/customer_list.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Customer List</p></b>
                </div>
              </td>

              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="customerform()" style="padding-left:5px; padding-right:5px; margin-bottom:-10px;" >
                  <b><img src="assets/images/add_customer.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Add Customer</p></b>
                </div> 
              </td>

              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="productList()" style="padding-left:5px; padding-right:5px; margin-bottom:-10px; " >
                  <b><img src="assets/images/product_list.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Product List</p></b>
                </div> 
              </td>

              <td style="width:25%; border-right: 1px solid #A1B588;">
                <div (click)="orderList()" style="padding-left:5px; padding-right:5px; margin-bottom:-10px;" >
                  <b><img src="assets/images/order_list.png" style="width:50px; height:50px;" />
                  <p style="margin-top:-1px; font-size:12px; color:#64823A;">Order List</p></b>
                </div> 
              </td>
            </tr>
          </table>  

          </ion-slide>

      </ion-slides>
    </p>
  </div>
  </div>

</ion-content>  

<ion-nav [root]="rootPage"></ion-nav>

这是app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { WalkthroughPage } from '../pages/walkthrough/walkthrough';
import { LoginPage } from '../pages/login/login';
import { UserloginPage } from '../pages/userlogin/userlogin';
import { NetworkconnectionPage } from '../pages/networkconnection/networkconnection';
import { Geolocation } from '@ionic-native/geolocation';

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs';
import { Observable } from 'rxjs/Observable';
import { AlertController } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { Network } from '@ionic-native/network';

import { CustomerlistPage } from '../pages/customerlist/customerlist';
import { ProductPage } from '../pages/product/product';
import { CustomerPage } from '../pages/customer/customer';
import { ProfilePage } from '../pages/profile/profile';
import { WalletPage } from '../pages/wallet/wallet';
import { MydayPage } from '../pages/myday/myday';
import { FaqPage } from '../pages/faq/faq';
import { TargetPage } from '../pages/target/target';
import { KnowledgebasePage } from '../pages/knowledgebase/knowledgebase';
import { SupportPage } from '../pages/support/support';
import { OrderlistPage } from '../pages/orderlist/orderlist';
import { Events } from 'ionic-angular';

@Component({
  templateUrl: 'app.html'
})


export class MyApp {

  //@ViewChild('myNav') nav: NavController
  rootPage:any = UserloginPage;
  cl:any = CustomerlistPage;

  platform:any;
  latt:any;
  lonn:any;
  nav: NavController;

  customerlistPage = CustomerlistPage;      
  productPage = ProductPage;   
  customerPage = CustomerPage;     
  profilePage = ProfilePage;
  walletPage = WalletPage;
  mydayPage = MydayPage;
  faqPage = FaqPage;
  targetPage = TargetPage;
  knowledgebasePage = KnowledgebasePage;
  supportPage = SupportPage;
  orderlistPage = OrderlistPage;


  constructor(public navCtrl: NavController, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private alertCtrl: AlertController, public toastCtrl: ToastController, private network: Network, public geolocation: Geolocation) {  

    //this.nav = navCtrl;
    platform.ready().then(() => {

      statusBar.styleDefault();
      //splashScreen.hide();

      if (splashScreen) {
        setTimeout(() => {
          splashScreen.hide();
        }, 100);
      }

    });
  }

  customerList(){
    this.navCtrl.push(CustomerlistPage);  //no provider for NavController!
  }


  customerform(){

    this.geolocation.getCurrentPosition().then((resp) => {
          this.latt=resp.coords.latitude;
          this.lonn=resp.coords.longitude;
          console.log("Latitude: ", this.latt);
          console.log("Longitude: ", this.lonn);

          this.navCtrl.push(CustomerPage,{  //no provider for NavController!
            latPass: this.latt,
            longPass:this.lonn
          });

        }).catch((error) => {
          console.log('Error getting location', error);
        });
  }

  productList(){
    this.navCtrl.push(ProductPage);  //no provider for NavController!
  }

  orderList(){
    this.navCtrl.push(OrderlistPage);  //no provider for NavController!
  }

}

Answer 1

我得到了同样的错误。似乎只是Ionic的一个问题。但是有一种解决方法。

import {App} from 'ionic-angular';

constructor(public app: App) {}

productList(){
  this.app.getRootNav().push(ProductPage);
}

orderList(){
  this.app.getRootNav().push(OrderlistPage);
}

离子扫描全局用于app.ts ionic 2中的所有页面

1 个答案: