代码之家 › 专栏 › 技术社区 › Charis The Programmer

如何更新ionic中选项卡中按钮的状态?

ionic3 ionic2 ionic-framework

Charis The Programmer · 技术社区 · 7 年前

我正在使用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 ,它按预期工作。

我想要的是标签自动切换,这取决于用户是否登录。当用户成功登录时,我正在设置一个值 洛格丁 在本地存储中实现。然后我在我的电脑里有下面的代码 标签。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的值设置和更改正确,但是 标签。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

3 回复 | 直到 7 年前

Rodrigo Baute 7 年前

问题是,您使用的是tabs ionViewWillEnter()的本地事件,因此它只会获得一次值,我建议您创建一个外部提供程序,并使用该提供程序变量设置选项卡的状态,当您将状态更改为loggedIn/Off时,更改提供程序中变量的值。

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>

EM15 7 年前

IMHO实现这一点的最佳方式是创建 Subject<boolean> 或 BehaviourSubject<boolean> (这就是他们之间的区别 https://stackoverflow.com/a/43351340/7200009 ).你有授权服务吗?如果是这样,您可以创建一个主题变量,并在选项卡中订阅它。比如:

授权服务。ts

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

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

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

塔布斯帕奇。ts

  loggedIn: boolean;
  loggedInChangedSubscription: Subscription;

  constructor(private authService: AuthService){}

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

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

Oscar Mera 7 年前

我有一个应用程序,它的行为和你所需要的一样,我所做的就是使用它 https://ionicframework.com/docs/api/util/Events/

您可以从“关闭会话”按钮生成事件,并从选项卡接收事件。ts