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()

刷新页面，然后一切看起来都正确。

当用户点击＆＃34;更新个人资料时，会出现问题。主页上的按钮，使用此功能

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

用户被发送到http://localhost:8100/#/home/profile，他们可以在那里更新自己的个人资料。然后，当您返回主页时，网址仍为http://localhost:8100/#/home/profile，当您触发SignOut（）函数时，您将转到http://localhost:8100/#/profile，并且由于某种原因显示为setRoot视图。

主要是，我正在寻找一种方法来覆盖所有这些并使其成为当触发signOut（）函数时，它只是将用户返回到rootPage，即“登录页面”。

我为判刑和语法错误而道歉。

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是一个观察者，每次用户登录或注销时都会触发该观察者。

Answer 2

您可以导入app.component.ts页面以获取rootPage引用。所以，你可以这样做：

import {appName} from '../../app/app.component';
 ...
 constructor(private app: appName) {}

 clickNewPage(newPage: string) {
   this.app.rootPage = newPage;
}

离子选项卡应用程序遇到setRoot和Push问题

2 个答案: