app.ts中所有頁面的全局離子滑動使用離子2

Question

我真的需要你的幫助。我正在研究ionic2。我想通過在app.html中編寫代碼來顯示所有頁面的離子滑動，並且它會顯示，但是當我在app標籤中應用'（click）'時，會出現錯誤，如'沒有提供NavController ！問題是我如何導航多個頁面（如CustomerListPage，OrderListPage）使用點擊應用程序中的div標籤。

任何幫助，高度讚賞。

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