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方法，几乎没有办法设置用户。

使用事件，app.js都会收听一个事件，例如＆＃34; user：login＆＃34;从login.js触发。这是一个演示如何使用Events类https://github.com/ionic-team/ionic/tree/master/demos/src/events
使用Observable。（请查看https://github.com/Reactive-Extensions/RxJS）。 app.js订阅了一个从login.js
使用服务提供程序，例如创建一个UserProviderService，它通过依赖注入注入login.js。

请查看此应用，它具有您可以关注的登录功能。

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

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

1 个答案: