AngularJS+Ionic 5选项卡导航

Question

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

在不手动刷新页面的情况下，有什么解决方案吗？非常感谢。

以下是登录.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
});
}

以下是选项卡的代码。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>

Answer 1

登录成功后，必须调用选项卡页面上的this.loadCookie();。您可以在登录后发布事件，并在选项卡页面中进行订阅。在事件订阅中，您可以调用this.loadCookie()函数。