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

Question

您好，我正在学习 Ionic 2，我需要更改 Ionic 2 app.js 中的一个变量，我认为这是根 Controller 。

我使用

启动了一个新应用

ionic 启动 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”。这是一个如何使用事件类的演示 https://github.com/ionic-team/ionic/tree/master/demos/src/events

2. 使用 Observable。 (请查看 https://github.com/Reactive-Extensions/RxJS )。 app.js 订阅一个从 login.js 触发的可观察对象

3. 使用Service Provider，比如创建一个UserProviderService，通过依赖注入(inject)注入(inject)到login.js中。

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

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