我可以访问我的标签页上的数据,但不能访问我的应用中的主页

时间:2017-10-26 11:31:29

标签: angular ionic-framework ionic2

我使用API​​在我的登录页面上检索了数据。现在我想访问这些数据。 我可以访问选项卡页面上的数据,因为tabspage是在成功登录后打开的页面。我无法在主页,个人资料页面等其他网页上访问该数据。

告诉我一些代码或概念,我可以通过它从tabspage或登录页面访问主页。

登录页面

var headers = new Headers();
    //headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let options = new RequestOptions({headers: headers});
    let postParams ='&password='+ this.loginpass + '&phone=' + this.loginmob;
   // console.log(JSON.stringify(postParams));
    this.http.post("http://www.btedge.appexperts.net/Ionic_Webservices/login.php", JSON.stringify(postParams), options)
    .map(
      (res:Response) => { return console.log(this.users=res.json());})
      .subscribe(data => {
        if(this.users.success=="1")
          { 

              this.loadingCtrl.create({
                content: 'Login Successfully... ',
                duration: 4000,
                dismissOnPageChange: true
              }).present();
           //alert(this.users.user_id);
           this.navCtrl.push(TabsPage,{user_id: this.users.user_id,distributor_id: this.users.distributor_id,user_name:this.users.user_name,user_email:this.users.user_email,user_phoneno:this.users.user_phoneno,user_address:this.users.user_address,distributor_name:this.users.distributor_name,distributor_phoneno:this.users.distributor_phoneno,distributor_address:this.users.distributor_address,distributor_email:this.users.distributor_email});


          }
        else if(this.users.success=="2")
          {
            alert("Phone no or Password Incorrect");
            //this.navCtrl.push(HomePage);
          }
        else if(this.users.success=="0")
          {
            alert("Required Fields Blank..");
            //this.navCtrl.push(HomePage);
          }     
      },
    error=>{console.log(error)});

TabsPage-在这里我可以访问不是来自登录页面的手机

import { Component } from '@angular/core';
import { AppModule } from '../../app/app.module';
import { AlertController,LoadingController } from 'ionic-angular';
import { NavController, NavParams } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ProfilePage } from '../profile/profile';
import { LoginPage } from '../Login/Login';
import { HomePage } from '../home/home';
import { MsgPage } from "../message/message";

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
 users: any;
  tab1Root = HomePage;
  tab2Root = MsgPage;
  tab3Root = AboutPage;
  tab4Root = ProfilePage;
  userphone: any;


  constructor(public navCtrl: NavController,private navParams : NavParams) {

    this.userphone=this.navParams.get('user_phoneno');
    console.log(this.userphone);
  }

}

首页 - 本页 - 我无法访问手机号码。我该怎么办?

import { Component } from '@angular/core';
import { AppModule } from '../../app/app.module';
import { AlertController,LoadingController } from 'ionic-angular';
import { NavController, NavParams } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ProfilePage } from '../profile/profile';
import { LoginPage } from '../Login/Login';
import { TabsPage } from "../tabs/tabs";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',

})
export class HomePage {
  userphone: String;
  useremail: String;
  constructor(public navCtrl: NavController, private navParams : NavParams) {
    this.userphone=this.navParams.get('user_phoneno');
    console.log(this.userphone);


  }

}

2 个答案:

答案 0 :(得分:0)

<强>登录

var headers = new Headers();
    //headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let options = new RequestOptions({headers: headers});
    let postParams ='&password='+ this.loginpass + '&phone=' + this.loginmob;
   // console.log(JSON.stringify(postParams));
    this.http.post("http://www.btedge.appexperts.net/Ionic_Webservices/login.php", JSON.stringify(postParams), options)
    .map(
      (res:Response) => { return console.log(this.users=res.json());})
      .subscribe(data => {
        if(this.users.success=="1")
          { 

              this.loadingCtrl.create({
                content: 'Login Successfully... ',
                duration: 4000,
                dismissOnPageChange: true
              }).present();
           //alert(this.users.user_id);
   localStorage.setItem('userdata', this.users);
           this.navCtrl.setRoot(TabsPage);


          }
        else if(this.users.success=="2")
          {
            alert("Phone no or Password Incorrect");
            //this.navCtrl.push(HomePage);
          }
        else if(this.users.success=="0")
          {
            alert("Required Fields Blank..");
            //this.navCtrl.push(HomePage);
          }     
      },
    error=>{console.log(error)});

首页:

import { Component } from '@angular/core';
import { AppModule } from '../../app/app.module';
import { AlertController,LoadingController } from 'ionic-angular';
import { NavController, NavParams } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ProfilePage } from '../profile/profile';
import { LoginPage } from '../Login/Login';
import { TabsPage } from "../tabs/tabs";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',

})
export class HomePage {
  userphone: String;
  useremail: String;
  userData:any;
  constructor() {

    this.userData = localStorage.getItem('userdata');
    this.userphone=this.userData.user_phoneno;
    console.log(this.userphone);


  }

}

答案 1 :(得分:0)

在TabsPage html布局中使用[rootParams]="userData"(适用于所有<ion-tab>标记)。

设置userData = {user_phoneno:this.navParams.get('user_phoneno')};

最后,您可以获取任何TabsPage页面的navParams。