如何更新 ionic 选项卡中按钮的状态？答案

【问题标题】：How do I update the state of buttons in tabs in ionic?如何更新 ionic 选项卡中按钮的状态？
【发布时间】：2019-03-27 20:50:02
【问题描述】：

我正在使用 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>

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

我想要的是选项卡自动切换，具体取决于用户是否登录。当用户成功登录时，我将本地存储中的值 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");
    }
  }

然而问题是，尽管变量loggedIn 的值被正确设置和更改，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

【问题讨论】：

所以当您点击此页面时，您会在控制台中看到we are logged in!？
@BRass 是的。此外，loggedIn 的值也是 true。

标签： ionic-framework ionic2 ionic3

【解决方案1】：

问题是您正在使用选项卡 ionViewWillEnter() 的本地事件，因此它只会获取一次值，我建议您创建一个外部提供程序并使用该提供程序 var 来设置选项卡的状态，更改当您将状态更改为登录/关闭时，提供程序中 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>

【讨论】：

【解决方案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();
  }

【讨论】：

【解决方案3】：

我有一个与你需要的行为相同的应用程序，我使用https://ionicframework.com/docs/api/util/Events/

您可以从关闭会话按钮生成事件并从 tabs.ts 接收事件

【讨论】：