javascript - Ionic 2 modify a variable in app.js from child page - Stack Overflow

admin管理员组

文章数量:1295941

Hi I am learning Ionic 2 and I have a requirement to change a variable in Ionic 2 app.js which is the root controller I believe.

I started a new app using

ionic start myApp tutorial --v2

and this is my app.html

<ion-menu id="leftMenu" [content]="content">
  <ion-content>
    <ion-item class="menu-background">
        <div class="wele-div">
          <img [src]="pictureURL" class="avatar-image"/>
          <span class="wele-message">Wele {{userName}}</span>
        </div>
    </ion-item>
    <ion-list>
      <button class="asbestos" ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
    <div>
      <p class="copyright asbestos">&copy; 2016. All rights reserved</p>
    </div>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

and this is my app.js

import {App, IonicApp, Platform} from 'ionic-framework/ionic';
import {Home} from './pages/home/home';
import {Status} from './pages/status/status';
import {Wallet} from './pages/wallet/wallet';
import {History} from './pages/history/history';
import {EarnMoney} from './pages/earnmoney/earnmoney';
import {ContactUs} from './pages/contactus/contactus';
import {Login} from './pages/login/login';


@App({
  templateUrl: 'build/app.html'
  config: {} // /
})
class MyApp {
  static get parameters() {
    return [[IonicApp], [Platform]];
  }

  constructor(app, platform) {
    // set up our app
    this.app = app;
    this.platform = platform;
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Home', ponent: Home },
      { title: 'Wallet', ponent: Wallet},
      { title: 'Status', ponent: Status},
      { title: 'History', ponent: History},
      { title: 'Earn Money', ponent: EarnMoney},
      { title: 'Contact Us', ponent: ContactUs}
    ];

    // make HelloIonicPage the root (or first) page
    this.rootPage = Login;
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      //
      // For example, we might change the StatusBar color. This one below is
      // good for light backgrounds and dark text;
      if (window.StatusBar) {
        window.StatusBar.styleDefault();
      }
    });
  }

  setUser(user) {
      this.userName = user.name;
      this.pictureURL = user.picture.data.url;
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(pageponent);
  }
}

this is one of my child pages javascript file

import {Page, NavController} from 'ionic-framework/ionic';
import {PhoneVerify} from '../phoneVerify/phoneVerify';
import {Home} from '../home/home';

@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class Login {
  static get parameters() {
    return [[NavController]];
  } 

  constructor(nav) {
    this.nav = nav;
  }
}

I am trying to call the setUser method in the app.js from the login.js please advise how do I do that.

Hi I am learning Ionic 2 and I have a requirement to change a variable in Ionic 2 app.js which is the root controller I believe.

I started a new app using

ionic start myApp tutorial --v2

and this is my app.html

<ion-menu id="leftMenu" [content]="content">
  <ion-content>
    <ion-item class="menu-background">
        <div class="wele-div">
          <img [src]="pictureURL" class="avatar-image"/>
          <span class="wele-message">Wele {{userName}}</span>
        </div>
    </ion-item>
    <ion-list>
      <button class="asbestos" ion-item *ngFor="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
    <div>
      <p class="copyright asbestos">&copy; 2016. All rights reserved</p>
    </div>
  </ion-content>

</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

and this is my app.js

import {App, IonicApp, Platform} from 'ionic-framework/ionic';
import {Home} from './pages/home/home';
import {Status} from './pages/status/status';
import {Wallet} from './pages/wallet/wallet';
import {History} from './pages/history/history';
import {EarnMoney} from './pages/earnmoney/earnmoney';
import {ContactUs} from './pages/contactus/contactus';
import {Login} from './pages/login/login';


@App({
  templateUrl: 'build/app.html'
  config: {} // http://ionicframework./docs/v2/api/config/Config/
})
class MyApp {
  static get parameters() {
    return [[IonicApp], [Platform]];
  }

  constructor(app, platform) {
    // set up our app
    this.app = app;
    this.platform = platform;
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Home', ponent: Home },
      { title: 'Wallet', ponent: Wallet},
      { title: 'Status', ponent: Status},
      { title: 'History', ponent: History},
      { title: 'Earn Money', ponent: EarnMoney},
      { title: 'Contact Us', ponent: ContactUs}
    ];

    // make HelloIonicPage the root (or first) page
    this.rootPage = Login;
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      //
      // For example, we might change the StatusBar color. This one below is
      // good for light backgrounds and dark text;
      if (window.StatusBar) {
        window.StatusBar.styleDefault();
      }
    });
  }

  setUser(user) {
      this.userName = user.name;
      this.pictureURL = user.picture.data.url;
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.ponent);
  }
}

this is one of my child pages javascript file

import {Page, NavController} from 'ionic-framework/ionic';
import {PhoneVerify} from '../phoneVerify/phoneVerify';
import {Home} from '../home/home';

@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class Login {
  static get parameters() {
    return [[NavController]];
  } 

  constructor(nav) {
    this.nav = nav;
  }
}

I am trying to call the setUser method in the app.js from the login.js please advise how do I do that.

• javascript
• ionic-framework
• angular
• ionic2

Share Follow edited Mar 6, 2016 at 21:17 alyn000r asked Mar 6, 2016 at 20:53 alyn000ralyn000r 56622 gold badges88 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

There are few ways for you to setUser without having calling the setUser method.

1. Use events, both app.js listen to an event, such as "user:login" that triggered from the login.js. This is a demo how to use the Events class https://github./ionic-team/ionic/tree/master/demos/src/events

2. Use Observable. (Please have look at https://github./Reactive-Extensions/RxJS). app.js subscribe a observable that triggered from login.js

3. Use Service Provider, such as create a UserProviderService, which is injected to login.js through dependency injection.

Please have look at this app, it has login feature that you can follow.

https://github./driftyco/ionic-conference-app

本文标签： javascriptIonic 2 modify a variable in appjs from child pageStack Overflow