Ionic 2 изменяет переменную в app.js с дочерней страницы

Привет, я изучаю 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;
  }
}

Я пытаюсь вызвать метод setUser в app.js из login.js, пожалуйста, посоветуйте, как мне это сделать.


person alyn000r    schedule 06.03.2016    source источник


Ответы (1)


Есть несколько способов задать setUser без вызова метода setUser.

  1. Используйте события, оба app.js прослушивают событие, такое как «user:login», которое запускается из login.js. Это демонстрация использования класса Events https://github.com/ionic-team/ionic/tree/master/demos/src/events

  2. Используйте Наблюдаемый. (Пожалуйста, посмотрите https://github.com/Reactive-Extensions/RxJS). app.js подписывается на наблюдаемое, которое запускается из login.js

  3. Используйте поставщика услуг, например создайте UserProviderService, который внедряется в login.js посредством внедрения зависимостей.

Пожалуйста, взгляните на это приложение, в нем есть функция входа в систему, которой вы можете следовать.

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

person Tuong Le    schedule 07.03.2016
comment
ты спас мой день. :) - person Cerlin; 20.05.2016
comment
Слава Богу. Мероприятия действительно помогли мне. Я не получил 3-го решения, хотя. Что именно нужно сделать. - person Sagar Kulkarni; 23.02.2017