离子标签应用程序与 setRoot 和 Push 有问题答案

【问题标题】：ionic tabs app that is having issues with setRoot and Push离子标签应用程序与 setRoot 和 Push 有问题
【发布时间】：2018-02-23 20:25:48
【问题描述】：

我有一个 ionic tabs 应用程序的视图存在问题。除了 4 个标签页外，我还生成了几个用于登录、注册、更新个人资料和添加待办事项的页面。我有

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”。

对于出现句子和语法错误，我深表歉意。

【问题讨论】：

标签： angular ionic-framework view

【解决方案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 是一个观察者，每次用户登录或退出时都会触发。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：