angularjs - AngularJS + Ionic 5 标签导航

Question

对于我的原生 APP 项目，我有两个选项卡，一个是主页选项卡，另一个名为“我的帐户”的选项卡由登录页面和帐户页面共享。登录成功后，它可以导航到帐户页面，但是当我单击“我的帐户”选项卡时，它将导航回登录页面。登录后需要手动刷新页面，就不会出现这个问题了。

有没有手动刷新页面的解决方案？谢谢你。

下面是login.page.ts的代码：

verifyLogin(pgcode:string, password:string)
    {
      //call API to verify the login details
      this.http.get(url, headers)
      .subscribe((apiReturn : any) =>
      {
        if(apiReturn.error){
          //if login failed
          this.sendNotification(apiReturn.error);
          this.router.navigateByUrl('/tabs/login', { replaceUrl: true }); //redirect to login page
        }else{
          //if login success
          this.sendNotification(apiReturn.message);
          this.router.navigateByUrl('/tabs/myaccount', { replaceUrl: true });
        }
      },
      (error : any) =>
      {
        //unable to call the API
        this.sendNotification('Something went wrong!');
        this.router.navigateByUrl('/tabs/login', { replaceUrl: true }); //redirect to login page
      });
    }

下面是tab.page.ts的代码：

  ngOnInit(){
    this.loadCookie();
  }
  
  async loadCookie(){
    const cookie = await Storage.get({key: 'cookie'}); //get cookie's value from localStorage(same like session)
    //const cookie = '';
    if(cookie.value == null){
      this.cookieValue = null;
      this.myAccTab = '/tabs/login';
      console.log('FALSE:',null);
    }else{
      this.cookieValue = cookie.value;  //assign {{cookieValue}} in html then will echo the cookie value in homepage
      this.myAccTab = '/tabs/myaccount';
      console.log('TRUE:',cookie.value);
    }
  }

下面是tabs.page.html的代码：

      <ion-tab-bar slot="bottom">
          <ion-tab-button tab="home" [routerLink]="['/tabs/home']">
            <ion-icon name="home"></ion-icon>
            <ion-label>Home</ion-label>
          </ion-tab-button>
          <ion-tab-button [routerLink]="myAccTab">
            <ion-icon name="accessibility-outline"></ion-icon>
            <ion-label>My Account</ion-label>
          </ion-tab-button>
      </ion-tab-bar>

标签： angularjsionic-framework

Answer 1

登录成功后，您必须this.loadCookie();在标签页上调用。您可以在登录后发布事件并在标签页中订阅它。在事件订阅中，您可以调用该this.loadCookie()函数。