使用Ionic 2，您如何通過登錄后通過模態將登錄狀態發送到另一個頁面的方式來更改按鈕？

Question

我的主頁上有一個按鈕，當用戶登錄時應顯示“注銷”，而在沒有用戶登錄時應顯示“登錄”。登錄按鈕將打開模式。 用戶登錄后，會將其發送到其他頁面。 當用戶登錄時導航回到主頁時，該按鈕現在應顯示“注銷”。

我已經嘗試了NavController中的所有ionView生命周期事件。

我認為這可能與創建兩個綁定變量有關，但是到目前為止，我不確定在這種情況下該如何做。

我也認為可能有某種方法可以通過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>

模態代碼：

登錄名

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

為您服務：

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();
}

最后在您的.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 2

在這里查看完整的插件， http： //plnkr.co/edit/jYDroF？p = preview，我使用了BehaviorSubject，因此您可以訂閱更改以獲取所需的更新

摘自home.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();
  }

}

授權

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 3

我使用了以下解釋： https : //ionicallyspeaking.com/2016/03/05/publishing-and-subscribing-to-events-in-ionic-2/

其中引用了Angular Events的訂閱和發布。

新的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;
    });
  }

}