Javascript 对于Ionic 2，如何根据登录状态通过模式更改按钮，在登录后将您发送到另一个页面？

我的主页上有一个按钮，当用户登录时，该按钮应显示“注销”，当没有用户登录时，该按钮应显示“登录”。登录按钮打开一个模式对话框。用户登录后，会将其发送到另一个页面。当用户在登录时导航回主页时，按钮现在应该显示“注销”

我已经尝试了NavController中的所有ionView生命周期事件

我认为这可能与创建一个两个绑定变量有关，但到目前为止，我不确定如何在这种情况下做到这一点

我还认为可能有某种方法可以通过NavController或ViewController将数据发送回主页。我不确定这是否是一个可行的解决方案，或者目前如何执行

最后，我想如果我可以通过主页中的OpenModel函数返回一个值，那么用户从登录模式登录也可以，但我不清楚如何实现这一点

页面主页的代码：

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>

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>

为您服务：

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

最后在you.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>

退出

在您的服务中：

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

最后在you.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>

退出

我使用了以下解释：

它引用订阅和发布角度事件

新的登录服务：

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

新家

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

}

---

我使用了以下解释：

它引用订阅和发布角度事件

新的登录服务：

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

新家

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

}

在这里查看完整的Plunk，我使用了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>

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

在这里查看完整的Plunk，我使用了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>

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

---

我真的很感谢你的回复，看起来应该有效，但事实并非如此。此外，我还尝试了对您的建议进行一些修改，例如将loginService.get_user_status（）放在ts构造函数中，并在将user_status重新指定为true或false后，在login和signout函数中的服务中设置_user_status。我认为我的查询存在范围挑战。它总是返回一个promise，因为它是a+promise库，所以我无法从promise的范围中获得结果。我测试了代码，它工作正常。这不取决于您的查询。首先使用不带“登录（电子邮件、密码）”的我的解决方案，然后添加您的逻辑。另外，将loginService添加到您的登录组件中不包含的src/app/app.module.ts提供程序。我不清楚您所说的“登录（电子邮件、密码）”是什么意思。此外，我的app.module.ts提供程序中有登录服务。根据我所看到的文档，我们不需要在组件中包含提供程序，但如果我没有包含它，则会出现“No provider for NavController！”错误。不管出于什么原因，我注意到我还需要注入组件。也许我做错了什么？好吧，我想我可以理解这个误会。我必须知道用户是否成功登录，然后我才能更改登录状态，这是一个承诺。我非常感谢您的回复，它看起来应该可以工作，但它没有。此外，我还尝试了对您的建议进行一些修改，例如将loginService.get_user_status（）放在ts构造函数中，并在将user_status重新指定为true或false后，在login和signout函数中的服务中设置_user_status。我认为我的查询存在范围挑战。它总是返回一个promise，因为它是a+promise库，所以我无法从promise的范围中获得结果。我测试了代码，它工作正常。这不取决于您的查询。首先使用不带“登录（电子邮件、密码）”的我的解决方案，然后添加您的逻辑。另外，将loginService添加到您的登录组件中不包含的src/app/app.module.ts提供程序。我不清楚您所说的“登录（电子邮件、密码）”是什么意思。此外，我的app.module.ts提供程序中有登录服务。根据我所看到的文档，我们不需要在组件中包含提供程序，但如果我没有包含它，则会出现“No provider for NavController！”错误。不管出于什么原因，我注意到我还需要注入组件。也许我做错了什么？好吧，我想我可以理解这个误会。我必须知道，如果用户登录成功之前，我可以改变登录状态，这是一个承诺。