Angular 如何在没有顶部选项卡的情况下导航页面App.components root

我使用的是Ionic 3，VS code IDE最近我发布了一个问题，关于从根选项卡页面导航到另一个页面（主页），没有顶部选项卡，我如何实现

应用程序组件.ts

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

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

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

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

constructor(private events: Events){ }

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

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

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

UserTabsPage.ts

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

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

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

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

constructor(private events: Events){ }

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

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

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

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>

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

userLogin.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>

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

>（单击）=“registerPage（）”>是否注册？

我的注册页面结果：

---

我预期的注册页面结果：

在

应用组件.ts

中，您需要将

根页面设置为
注册页面

您可以通过Ionic附带的
事件
模块/组件执行此操作

userLogin.ts

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

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

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

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

constructor(private events: Events){ }

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

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

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

应用程序组件.ts

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

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

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

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

constructor(private events: Events){ }

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

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

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

任何订阅了
'Register'
事件的人都将在该事件发布时收到通知。
别担心，记住要将其标记为正确，以防其他人遇到此问题：）