導航到其他頁面，但頁面在Ionic 2中爲空

Question

在這一堆代碼中，應用導航到MapPage，但空白頁面不僅會出現在任何頁面中，而且還會出現mappage。

this.navCtrl.push(MapPage, { UDI: this.UID, Token: Token }); 
    this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token }); 
    this.navCtrl.popToRoot(); 

完整代碼

import { Component } from '@angular/core'; 
import { Platform, AlertController, NavController } from 'ionic-angular'; 
import { LoginService } from '../../providers/login-service'; 
import { Http, Response } from '@angular/http'; 
//import { NativeStorage } from 'ionic-native';9903601 
import { DashboardPage } from '../dashboard/dashboard'; 
import { MapPage} from '../map/map' 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html', 
    providers: [LoginService] 
}) 
export class LoginPage { 
    public UID: any; 
    masks: any; 
    public phoneNumber: any = ""; 
    public Token; 
    public data; 

    constructor(public platform: Platform, public navCtrl: NavController, public loginservice: LoginService, public http: Http, public alertCtrl: AlertController) { 
     this.masks = { 
      phoneNumber: ['+', '9', '1', '-', /[1-9]/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/] 
     }; 
    } 

    ionViewDidLoad() { 
     this.GetUID(); 
    } 

    GetUID() { 
     this.loginservice.UIDload() 
      .then(data => { 
       this.UID = data; 
      }); 
    } 

    GetActivation() { 
     this.http.get('http://mydomain/sendverification/' + this.UID + '/' + this.phoneNumber + '/' + 'android1') 
      .map(res => res.text()) 
      .subscribe(data => { 
       this.data = data; 
       this.data = this.data.replace(/\n/g, ""); 
       this.data = this.data.replace(/\t/g, ""); 
       let alert = this.alertCtrl.create({ 
        title: "4 digit activation code sent to you", 
        inputs: [{ 
         name: 'activationcode', 
         placeholder: 'activation code' 
        }], 
        buttons: [{ 
         text: 'next', 
         role: 'next', 
         handler: data => { 
          this.http.get('http://mydomain/chekverification/' + this.UID + '/' + data.activationcode) 
           .map(res => res.text()) 
           .subscribe(Token => { 
            console.log(Token); 
            this.navCtrl.push(MapPage, { UDI: this.UID, Token: Token }); 
            this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token }); 
            this.navCtrl.popToRoot(); 
           }); 
         } 
        }, 
        { 
         text: 'retry', 
         role: 'retry', 
         handler: data => { 
          this.GetActivation(); 
         } 
        } 
        ] 
       }); 
       alert.present(); 
      }); 
    } 

} 

Answer 1

您需要使用只有三項功能：

this.navCtrl.push(MapPage, { UDI: this.UID, Token: Token }); 

這將推動MapPage到導航堆棧。

this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token }); 

這將設置MapPage爲堆棧的根並加載的頁面。

this.navCtrl.popToRoot(); 

這會彈出堆棧中的所有頁面直到堆棧的當前根目錄。

你的情況，只能做：

this.navCtrl.setRoot(MapPage ,{ UDI: this.UID, Token: Token });