Question

应用程序组件：

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>

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

Answer 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中的按钮以返回您要去的页面

（点击）=＆＃34;打开页面（＆＃39;登录页面＆＃39;）＆＃34;＆gt;点击此处
浏览一系列网页＆amp;选择您要转到的页面

openPage（page）{ this.pages.forEach（_page =＆gt; if（_page.title == page）this.nav.setRoot（page.component））; }

离子页面重定向无法正常工作

1 个答案: