С Ionic 2 как вы можете изменить кнопку на основе состояния входа через модальный, который отправит вас на другую страницу после входа?

Question

У меня есть кнопка на моей домашней странице, которая должна «выходить из системы», когда пользователь вошел в систему и «Войти», когда пользователь не вошел в систему. Кнопка входа в систему открывает модальный режим. Как только пользователь входит в систему, он отправляет их на другую страницу. Когда пользователь переходит к домашней странице во время входа в систему, кнопка должна теперь сказать «Выход».

Я пробовал все события жизненного цикла ionView от NavController.

Я думаю, что это могло бы иметь какое-то отношение к созданию переменной с двумя границами, но на данный момент я не уверен, как это сделать для этого случая.

Я также думаю, что может быть какой-то способ испускать данные через NavController или ViewController на домашнюю страницу. Я не уверен, что это жизнеспособное решение, или как это выполнить в это время.

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

Код для страницы Домашняя страница:

home.ts

import { Component } from '@angular/core'; 
import { NavController, ModalController } from 'ionic-angular'; 
import { LoginService } from '../../services/loginService'; 
import { Login } from '../login/login'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [LoginService] 
}) 
export class Home { 
    person: any; 

    constructor(public navCtrl: NavController, public storage: Storage, public loginService: LoginService, public benefitService: MembershipBenefitService, public modalCtrl: ModalController) { 
    this.benefit = benefitService.benefit(Parse.User.current()); 
    this.person = Parse.User.current();console.log("this.person", this.person); 
    } 

openModal(): any{ 
    let profileModal = this.modalCtrl.create(Login); 
    profileModal.present();   
    } 

    signout(): any{ 
    this.loginService.logout(); 
    this.person = null; 
    return this.person 
    } 

home.html

<ion-header class="opaque"> 
    <ion-navbar align-title=”center”> 
    <br> 
    <ion-title> 
     <img src="assets/new-logo-sm.png"/> 
    </ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only *ngIf="person != null" (click)="signout()"> 
     Sign out 
     </button> 
     <button ion-button icon-only *ngIf="person == null" (click)="openModal()"> 
     <ion-icon name="help-circle"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

Код для Modal:

login.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Parse } from 'parse-js-sdk'; 

import { LoginService } from '../../services/loginService'; 



@Component({ 
    selector: 'login', 
    templateUrl: 'login.html', 
    providers: [LoginService] 
}) 

export class Login { 
    email: string = ""; 
    password: string = ""; 
    person: any; 
    personEmail: any; 


    constructor(public navCtrl: NavController, private loginService: LoginService) { 
    var self = this; 
    self.person = Parse.User.current()//.get("email"); 
    console.log('self.person', self.person); 
    if(self.person !== null){ 
     self.personEmail = Parse.User.current().id 
    } 
    } 

login(){ 
    this.loginService.login(this.email, this.password); 
    } 
} 

login.html

<form (ngSubmit)="login()"> 
    <ion-list class="clearbackground"> 
     <ion-item> 
     <ion-label floating class="input-label">Email Address</ion-label> 
     <ion-input class="input-label" [(ngModel)]="email" required="required" type="email" maxlength="200" name="email"></ion-input> 
     </ion-item> 
     <br> 
     <ion-item> 
     <ion-label floating class="input-label">Password</ion-label> 
     <ion-input [(ngModel)]="password" required="required" type="password" maxlength="200" name="password"></ion-input> 
     </ion-item> 
     <br>   
    </ion-list> 
    </form> 

    <ion-list> 
    <ion-grid> 
     <ion-row> 
     <ion-col> 
      <button class="login-button-two" (click)="login()">Welcome Back</button> 
      <br> 
     </ion-col> 
     </ion-row> 
    </ion-grid> 
    </ion-list> 

Войти Услуги:

import { Injectable } from '@angular/core'; 
import { AlertController, NavController, ViewController } from 'ionic-angular'; 
import { Parse } from 'parse-js-sdk'; 
import { Directory } from '../pages/directory/directory'; 

@Injectable() 
export class LoginService { 

    constructor(public navCtrl: NavController, public alertCtrl: AlertController, public viewCtrl: ViewController) { 
    } 
login(email, password) { 
    var self = this; 
    if(Parse.User.current() === null) { 
     return Parse.User.logIn(email, password, { 
     success: function (logIn1User) { 
      console.log('3', logIn1User); 
      if(logIn1User.get("accountCanceled") === true){ 
      Parse.User.logOut(); 
      return self.accountCanceled(); 
      } else { 
      self.navCtrl.push(Directory); 
      self.viewCtrl.dismiss(); 
      } 
     }, 
     error: function (logIn1User, error) { 
      console.log('4', logIn1User, error); 
      return self.emailMistake(); 
     } 
     }); 

    } else { 
     self.alreadyLoggedInMessage(); 
    } 
    }; 
} 

Answer 1

увидеть полный plunker здесь http://plnkr.co/edit/jYDroF?p=preview, я использовал BehaviorSubject так, то вы можете подписаться на изменения, чтобы получить обновления, необходимые

выписка из дома.page.html

<ion-content padding> 
    Welcome to this 
    <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b> 
    <div> 
    <button ion-button (click)="doLoginAction()" [disabled]="currentUser"> LOGIN </button> 
    <button ion-button (click)="doLogoutAction()" [disabled]="!currentUser"> LOGOUT </button> 
    </div> 
    <div> 
    <p> 
    LOGIN STATUS <span *ngIf="currentUser">{{currentUser | json}}</span> 
    </p> 
    </div> 
</ion-content> 

home.page.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Authentication } from './auth'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'app/home.page.html' 
}) 
export class HomePage { 

    appName = 'Ionic App'; 
    currentUser 

    constructor(public navController: NavController, public auth : Authentication) { 

    this.auth.activeUser.subscribe((_user)=>{ 
     this.currentUser = _user 
    }) 
    } 

    doLoginAction() { 
    this.auth.doLogin(); 
    } 

    doLogoutAction() { 
    this.auth.doLogout(); 
    } 

} 

auth.ts

import {Injectable} from '@angular/core' 
import { BehaviorSubject } from 'rxjs/BehaviorSubject' 

@Injectable() 
export class Authentication { 

    activeUser = new BehaviorSubject(null) 

    constructor() { 

    } 

    doLogin() { 
    this.activeUser.next({ username: 'aaron@mail.com'}) 
    } 

    doLogout() { 
    this.activeUser.next(null) 
    } 
} 

Answer 2

В К вашим услугам:

user_status = false; 
get_user_status() { 
    return this.user_status; 
} 
set_user_status(user_status) { 
    this.user_status = user_status; 
} 

login() { 
    //some task 
    this.user_status = true; 
} 

signout() { 
    //some task 
    this.user_status = false; 
} 

В файле .ts:

get_user_status(){ 
    return this.LoginService.get_user_status(); 
} 

login(){ 
    this.LoginService.login(); 
} 

signout(){ 
    this.LoginService.signout(); 
} 

и finall у в вас .html файл:

<ion-buttons end> 
     <button ion-button icon-only *ngIf="get_user_status()" (click)="signout()"> 
    Sign out 
    </button> 
     <button ion-button icon-only *ngIf="!get_user_status()" (click)="login()"> 
    <ion-icon name="help-circle"></ion-icon> 
    </button> 
    </ion-buttons> 

Answer 3

Я использовал объяснение от: https://ionicallyspeaking.com/2016/03/05/publishing-and-subscribing-to-events-in-ionic-2/

каких ссылок подписавшего и издательский угловому События.

Новый LoginService:

import { Injectable } from '@angular/core'; 
import { AlertController, NavController, ViewController, Events } from 'ionic-angular'; 
import { Parse } from 'parse-js-sdk'; 
import { Directory } from '../pages/directory/directory'; 

@Injectable() 
export class LoginService { 

    constructor(public navCtrl: NavController, public alertCtrl: AlertController, public viewCtrl: ViewController, public events: Events) {} 

    sendUserStatus(userStatus) { 
    this.events.publish('loginStatus',userStatus); 
    } 

login(email, password) { 
    var self = this; 
    if(Parse.User.current() === null) { 
     return Parse.User.logIn(email, password, { 
     success: function (logIn1User) { 
      console.log('3', logIn1User); 
      if(logIn1User.get("accountCanceled") === true){ 
      Parse.User.logOut(); 
      return self.accountCanceled(); 
      } else { 
      self.userStatus = true; 
      self.sendUserStatus(self.userStatus); 
      self.navCtrl.push(Directory); 
      self.viewCtrl.dismiss(); 
      } 
     }, 
     error: function (logIn1User, error) { 
      console.log('4', logIn1User, error); 
      return self.emailMistake(); 
     } 
     }); 

    } else { 
     self.alreadyLoggedInMessage(); 
    } 
    }; 
} 

Новый home.ts

import { Component } from '@angular/core'; 
import { NavController, ModalController, Events } from 'ionic-angular'; 
import { LoginService } from '../../services/loginService'; 
import { Login } from '../login/login'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [LoginService] 
}) 
export class Home { 
    person: any; 

    constructor(public navCtrl: NavController, public storage: Storage, public loginService: LoginService, public benefitService: MembershipBenefitService, public modalCtrl: ModalController, public events: Events) { 
    this.benefit = benefitService.benefit(Parse.User.current()); 
    this.listenToLoginEvents(); 
    } 

openModal(): any{ 
    let profileModal = this.modalCtrl.create(Login); 
    profileModal.present();   
    } 

    signout(): any{ 
    this.loginService.logout(); 
    this.person = null; 
    return this.person 
    } 

listenToLoginEvents() { 
    this.events.subscribe('loginStatus', (status) => { 
     this.person = status; 
    }); 
    } 

}