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

Ionic 2 modify a variable in app.js from child page

本文关键字:js app 变量 修改 Ionic      更新时间:2023-09-26

嗨,我正在学习 Ionic 2,我需要在 Ionic 2 应用程序中更改变量.js我相信这是根控制器。

我开始使用一个新应用程序

离子启动我的应用教程 --v2

这是我的应用程序.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>

这是我的应用程序.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;
  }
}

我正在尝试从登录名调用应用程序中的setUser方法.js.js请告知我该怎么做。

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

  1. 使用事件,两个应用程序.js侦听事件,例如从登录触发的"用户:登录.js。这是一个如何使用 Events 类 https://github.com/ionic-team/ionic/tree/master/demos/src/events 的演示

  2. 使用可观察。(请看 https://github.com/Reactive-Extensions/RxJS)。应用程序.js订阅从登录触发的可观察量.js

  3. 使用服务提供程序,
  4. 例如创建用户提供程序服务,通过依赖注入.js注入登录。

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

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