Question

我正在使用Ionic中的选项卡式模板来构建应用程序。它有4个按钮。。

用户注销后，第四个按钮应将他们带到如上所述的登录/注册页面。

他们登录后，应该显示一个退出按钮，如上所示。

以下是我在tabs.html中显示我的标签的代码：

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="List Providers" tabIcon="list"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Login/Register" tabIcon="finger-print" *ngIf="loggedIn"></ion-tab>
  <ion-tab tabTitle="Logout" tabIcon="exit" (click)="logout()" *ngIf="!loggedIn"></ion-tab>
</ion-tabs>

当我通过手动设置loggedIn中的布尔变量tabs.ts的值来测试这种安排时，它会按预期工作。

我想要的选项卡是自动切换的，具体取决于用户是否登录。当用户成功登录时，我正在将本地存储中的值loggedIn设置为true。然后，我在tabs.ts中有以下代码，该代码应切换登录/注销按钮：

loggedIn: boolean = false;

  ionViewWillEnter(): void {

    if (localStorage.getItem('loggedIn') == 'true') {
      this.loggedIn = true;
      console.log("we are logged in!");
    } else {
      this.loggedIn = false;
      console.log("we are logged out");
    }
  }

但是，问题是，尽管已正确设置和更改变量loggingIn的值，但是tabs.html中的视图没有更新以显示注销按钮，但仍显示登录/注册按钮。如何在每次单击按钮时刷新选项卡？我尝试将代码添加到ionViewWillEnter()函数中，但是没有用。任何帮助将不胜感激！

我的系统：

$ ionic info

Ionic:

   ionic (Ionic CLI)  : 4.0.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 3.5.2
   OS                : Linux 4.15

Environment:

   ANDROID_HOME : /home/user/Android/Sdk

Answer 1

问题是您正在使用选项卡ionViewWillEnter（）的本地事件，因此它只会获取一次值，我建议您创建一个外部提供程序并使用该提供程序var来设置选项卡的状态，将状态更改为loginIn / Off时提供程序中var的值。

import { GlobalProvider } from "../../providers/globals"
constructor(        
    public global: GlobalProvider,
){
    if(!this.global.loggedIn)this.global.loggedIn=false;
}

在提供商中

@Injectable()
export class GlobalProvider {
    public loggedIn = false;
}

在HTML中

<ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="List Providers" tabIcon="list"></ion-tab>
   <ion-tab [root]="tab4Root" tabTitle="Login/Register" tabIcon="finger-print" *ngIf="global.loggedIn"></ion-tab>
   <ion-tab tabTitle="Logout" tabIcon="exit" (click)="logout()" *ngIf="!global.loggedIn"> 
</ion-tab>

Answer 2

恕我直言，实现此目标的最佳方法是创建一个Subject<boolean>或BehaviourSubject<boolean>（这是它们之间的区别https://stackoverflow.com/a/43351340/7200009）。您有AuthService吗？如果是这样，您可以创建一个主题变量并在选项卡页面中对其进行订阅。像这样：

AuthService.ts

  loggedInChanged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  login(){
    // Your Login logic.
    this.loggedInChanged.next(true);
  }

  logout(){
    // Your Logout logic.
    this.loggedInChanged.next(false);
  }

TabsPage.ts

  loggedIn: boolean;
  loggedInChangedSubscription: Subscription;

  constructor(private authService: AuthService){}

  ionViewDidLoad(){
    this.loggedInChangedSubscription = this.authService.loggedInChanged.subscribe(loggedIn => {
      this.loggedIn = loggedIn;
    })
  }

  ionViewWillUnload() {
    this.loggedInChangedSubscription.unsubscribe();
  }

Answer 3

我有一个行为与您需要使用https://ionicframework.com/docs/api/util/Events/

相同的应用程序

您可以通过“关闭会话”按钮生成事件，并从标签中接收事件。

如何更新离子卡中选项卡中按钮的状态？

3 个答案: