离子选项卡应用程序与setRoot和推问题

Question

我有一个离子选项卡应用程序，它的意见有问题。除了4个标签页之外，我还有几个生成的页面用于登录，注册，更新配置文件和addtodo。我有

rootPage:any = 'LoginPage'; 

在app.component.ts

，然后当你的login.ts模块中点击Login（）函数，我有

await this.navCtrl.setRoot(TabsPage); 

一旦用户登录并采取TabsPage的网址是：http://localhost:8100/#/login

从这里一切工作正常。我有一个signOut（）函数：

signOut(){ 
    this.afAuth.auth.signOut().then(res => { 
    this.navCtrl.push(LoginPage); 
}); 
} 

这方面的迹象用户，但是由于标签在底部仍显示我用

window.location.reload() 

刷新页面，然后这一切看起来是正确的。

的问题，当用户点击主页上的“更新配置文件”按钮，使用该功能

updateProfile(){ 
    this.navCtrl.push('ProfilePage'); 
    } 

而且用户发送到http://localhost:8100/#/home/profile在那里他们可以更新他们的个人资料出现。然后，当你回到主页时，url仍然是http://localhost:8100/#/home/profile，当你触发SignOut（）函数时，你被带到http://localhost:8100/#/profile，并且出于某种原因它被显示为setRoot视图。

主要是，我正在寻找一种方法来覆盖所有这些，并使其在触发signOut（）函数时简单地将用户返回到rootPage，即“LoginPage”。

对于运行句子和语法错误，我表示歉意。

Answer 1

将此代码添加到app.component.ts文件中的构造函数中。您必须将firebase和angularfire2/auth导入到app.component.ts文件中。

import { AngularFireAuth } from 'angularfire2/auth'; 
    import * as firebase from 'firebase'; 


     firebase.auth().onAuthStateChanged(user => { 
      if (user) { 
       this.rootPage = ProfilePage 
      } else { 
       this.rootPage = LoginPage 
      } 
     }) 

https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged

onAuthStateChanged是被触发每次在用户登录或登出的观察者。