0
我的主頁上有一個按鈕，當用戶登錄時應該說'註銷'，沒有用戶登錄時應該說'登錄'。登錄按鈕打開一個模式。一旦用戶登錄，它將它們發送到不同的頁面。當用戶在登錄時回到主頁時，該按鈕現在應該說出'註銷'。使用Ionic 2時，如何通過模式將基於登錄狀態的按鈕更改爲登錄後將您發送到另一頁的模式？
我已經嘗試了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>
代碼模態：
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();
}
};
}
我很欣賞你的反應，它看起來像它應該工作，但事實並非如此。另外，我嘗試了一些你的建議，例如在將user_status重新指定爲true或false後，將loginService.get_user_status（）放入ts構造函數中，並在服務中將set_user_status放入登錄和登出函數中。我認爲我的查詢存在範圍挑戰。它始終返回一個承諾，並且由於它是A +承諾庫，我無法將結果與承諾的範圍分開。 – rashadb
我測試的代碼，它的工作正常。它不依賴於你的查詢。首先使用我的解決方案，不用'登錄（電子郵件，密碼）'，然後添加你的邏輯。還要將loginService添加到不在您的登錄組件中的src/app/app.module.ts提供程序中。 –
我不清楚你的意思是什麼：'登錄（電子郵件，密碼）'。另外，我在我的app.module.ts提供程序中有LoginService。鑑於我見過的文檔，我們不應該在組件中包含提供者，但是當我不包含它時，我會得到一個「沒有NavController的提供者！」。錯誤。無論出於何種原因，我注意到我還需要注入組件。也許我在做別的事情呢？好吧，我想我可能會理解這種誤解。我必須知道用戶是否登錄成功，然後才能更改登錄狀態，這是一個承諾。 – rashadb