如何在没有顶部标签App.components根的情况下导航页面

Question

最近我正在使用Ionic 3和VS code IDE，我遇到了一个问题，即导航到从根Tab页面到没有Top Tab的另一页（主页）的导航如何实现？

app.component.ts

import { UserTabsPage } from '../pages/user-tab/user-tabs';
export class MyApp {
  rootPage:any = UserTabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {}
}

UserTabsPage.ts

export class UserTabsPage { 
tab1Root = UserLoginPage;   
tab2Root =LoginPage;  
 constructor() { } 
}

UserTabsPage.html

 <ion-content padding center text-center>
    <ion-tabs tabsPlacement="top" >
      <ion-tab [root]="tab1Root" tabTitle="User Login"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Phone Login"></ion-tab>
    </ion-tabs> </ion-content>

userLogin.ts

import { RegisterPage } from '../register/register';
     private registerPage(){
          this.navCtrl.setRoot(RegisterPage );}

userLogin.html

> <button ion-button clear ion-button item-end icon-start color="dark"
> (click)="registerPage()" >Sign Up?</button>

我的注册页面结果：

我的预期注册页面结果：

Answer 1

在您的app.component.ts中，您需要将rootPage设置为RegisterPage

您可以通过Ionic随附的Events模块/组件来完成此操作。

userLogin.ts

constructor(private events: Events){ }

public registerPage() {
  this.events.publish('Register');
}

app.component.ts

constructor(..., private events: Events) {
  this.initEvents();
}

private initEvents() {
  this.events.subscribe('Register', () => {
    this.rootPage = RegisterPage;
  });
}

发布'Register'事件的所有内容都会在发布该事件时得到通知。