Ionic 2从子页面修改app.js中的变量

Question

嗨，我正在学习Ionic 2，并且我有要求更改Ionic 2 app.js中的一个变量，这是我认为的根控制器。

我开始使用

离子开始对myApp教程--v2

一个新的应用程序，这是我的app.html

<ion-menu id="leftMenu" [content]="content"> 
    <ion-content> 
    <ion-item class="menu-background"> 
     <div class="welcome-div"> 
      <img [src]="pictureURL" class="avatar-image"/> 
      <span class="welcome-message">Welcome {{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> 

，这是我的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.com/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', component: Home }, 
     { title: 'Wallet', component: Wallet}, 
     { title: 'Status', component: Status}, 
     { title: 'History', component: History}, 
     { title: 'Earn Money', component: EarnMoney}, 
     { title: 'Contact Us', component: 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.component); 
    } 
} 

这是我的孩子网页之一javascript文件

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; 
    } 
} 

我想从login.js的app.js中调用setUser方法，请告诉我该怎么做。

Answer 1

有几种方法可以在不调用setUser方法的情况下设置用户。

1. 使用事件，两个app.js监听一个事件，例如从login.js触发的“user：login”事件。这是演示如何使用Events类https://github.com/ionic-team/ionic/tree/master/demos/src/events

2. 使用Observable。 （请看https://github.com/Reactive-Extensions/RxJS）。 app.js订阅从login.js触发的可观察值

3. 使用服务提供者，例如创建UserProviderService，通过依赖注入将其注入到login.js中。

请看看这个应用程序，它有登录功能，你可以关注。

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