如何导航没有顶部选项卡的页面App.components root [英] How to navigate Page without Top Tabs App.components root

问题描述

我正在使用Ionic 3，VS代码IDE最近我问到导航到setRoot从root选项卡页面到另一个页面（主页）没有Top Tabs我怎么能实现？

I'm using Ionic 3 , VS code IDE recently I came issue regards navigation to setRoot from root Tab page to another page (Home Page) without Top Tabs how could I achieve ?

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>

我的注册页面结果：

我的预期注册页面结果：

推荐答案

在 app.component.ts 中，您需要设置 rootPage 到 RegisterPage

你可以通过活动来做到这一点 Ionic附带的模块/组件。

You could do this via the Events module/component that comes with Ionic.

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;
  });
}

订阅'注册'的任何内容事件，将在该事件发布时得到通知。

Anything that is subscribed to the 'Register' event, will be notified when that event is published.

这篇关于如何导航没有顶部选项卡的页面App.components root的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！