离子页面重定向不起作用答案

【问题标题】：Ionic page redirect not working离子页面重定向不起作用
【发布时间】：2018-03-15 14:39:23
【问题描述】：

应用组件：

import { Component, ViewChild } from '@angular/core';
import { Config, Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  @ViewChild(Nav) nav: Nav;

  pages: any[] = [
    { title: 'HomePage', component: 'HomePage' },
    { title: 'CategoriesPage', component: 'CategoriesPage' },
    { title: 'SubCategoriesPage', component: 'SubCategoriesPage' },
    { title: 'ChangepasswordPage', component: 'ChangepasswordPage' },
    { title: 'LoginPage', component: 'LoginPage' },
    { title: 'ForgotpasswordPage', component: 'ForgotpasswordPage' },
    { title: 'SignupPage', component: 'SignupPage' },
    { title: 'TabsPage', component: 'TabsPage' }
  ]

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

}

应用模块：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, IonicPageModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicPageModule.forChild(HomePage)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

页面：

<ion-header>
</ion-header>

<ion-content padding>
    <ion-row>
      <ion-col text-center>
        <p color="secondary" style="text-align: center;">Not registered? <b (click)="openPage(HomePage)">Create an account</b></p>
        <p color="secondary" style="text-align: center;">Login? <b (click)="openPage()">Click here</b></p>
      </ion-col>
    </ion-row>
</ion-content>

主页是可见的，但另一个页面没有打开。在组件页面中，有一个打开页面功能，但仍然无法正常工作。任何人都可以请告诉为什么其他页面没有打开，我该如何解决这个问题？对不起我的英语不好。我是离子的初学者，所以请尝试深入解释。提前致谢。

【问题讨论】：

你想要一个侧边栏菜单吗？您正在调用哪个函数以及要导航到哪个页面，并且您正在使用两个函数，一个带页面参数，一个不带参数

标签： ionic-framework ionic2 ionic3

【解决方案1】：

请注意你的变量

pages: any[] = [
    { title: 'HomePage', component: 'HomePage' },
    { title: 'CategoriesPage', component: 'CategoriesPage' },
    { title: 'SubCategoriesPage', component: 'SubCategoriesPage' },
    { title: 'ChangepasswordPage', component: 'ChangepasswordPage' },
    { title: 'LoginPage', component: 'LoginPage' },
    { title: 'ForgotpasswordPage', component: 'ForgotpasswordPage' },
    { title: 'SignupPage', component: 'SignupPage' },
    { title: 'TabsPage', component: 'TabsPage' }
  ]

如您所见，它是一个数组。它包含多个页面。因此，当您要使用页面时，您需要指定哪一个。例如，如果我想根据您的数组转到 CategoriesPage，我会这样做。

在html中改变你的按钮返回你想去的页面

(click)="openPage('LoginPage')">点击这里
浏览页面数组并选择要访问的页面

打开页面（页面）{ this.pages.forEach(_page => if (_page.title == page) this.nav.setRoot(page.component)); }

【讨论】：