Как мне обновить состояние кнопок на вкладках в ионном режиме? - PullRequest
Новая
       43

Как мне обновить состояние кнопок на вкладках в ионном режиме?

0 голосов
/ 23 октября 2018

Я создаю приложение, используя шаблон с вкладками в Ionic.Имеет 4 кнопки.,Fig 1

Когда пользователь вышел из системы, 4-ая кнопка должна перевести его на страницу входа / регистрации, как указано выше.

Fig 2

Когда они вошли в систему, должна появиться кнопка выхода из системы, как показано выше.

Ниже мой код в 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");
    }
  }

Проблема, однако, состоит в том, что хотя значение переменной 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

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

ИМХО лучший способ реализовать это, это создать 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();
  }
0 голосов
/ 24 октября 2018

У меня есть приложение с тем же поведением, которое вам нужно, и я использовал https://ionicframework.com/docs/api/util/Events/

, вы можете сгенерировать событие с помощью кнопки закрытия сеанса и получить событие с вкладок .ts

0 голосов
/ 23 октября 2018

Проблема в том, что вы используете локальное событие вкладок 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>
...