Ionic 3与Angular：如何实现可复用的页面跳转按钮？

你遇到的问题核心在于：NavController.push()方法需要接收页面组件的类引用，而不是字符串名称。你在HTML里传递的gameSettings是一个字符串，并不是实际的页面类，所以会触发未定义的错误。下面给你两种可行的解决方案，帮你实现可复用的跳转按钮：

方案一：创建全局导航服务（推荐） #

在Ionic中，用服务来封装通用导航逻辑是更规范的做法，比直接在app.ts里写更灵活易维护。

1. 生成导航服务
   用Ionic CLI创建一个服务：

   ionic generate service services/navigation
   

2. 实现服务逻辑
   在navigation.service.ts中，注入NavController，并编写通用跳转方法。同时，我们可以维护一个页面映射对象，把字符串标识和对应的页面类关联起来：

   import { Injectable } from '@angular/core';
   import { NavController } from 'ionic-angular';
   // 导入所有需要跳转的页面类
   import { GameSettingsPage } from '../../pages/game-settings/game-settings';
   import { HomePage } from '../../pages/home/home';
   // 其他页面...
   
   @Injectable()
   export class NavigationService {
     // 页面映射表：字符串标识 -> 页面类
     private pageMap: { [key: string]: any } = {
       'gameSettings': GameSettingsPage,
       'home': HomePage
       // 添加更多页面映射
     };
   
     constructor(private navCtrl: NavController) {}
   
     moveToPage(pageKey: string) {
       const targetPage = this.pageMap[pageKey];
       if (targetPage) {
         this.navCtrl.push(targetPage);
       } else {
         console.error(`找不到页面：${pageKey}`);
       }
     }
   }
   

3. 在app.module.ts中注册服务
   确保把这个服务加入到providers数组中，这样整个应用都能注入使用。

4. 在页面中使用
   在任意页面的HTML中，直接传递页面的字符串标识：

   <button ion-button color="light" (click)="navService.moveToPage('gameSettings')">One Player</button>
   

   在页面的TS文件中注入服务：

   import { NavigationService } from '../../services/navigation/navigation.service';
   
   export class HomePage {
     constructor(public navService: NavigationService) {}
   }
   

方案二：直接在app.ts中实现（适配你的初始思路） #

如果你坚持要在app.ts中编写跳转方法，需要确保传递的是页面类引用，而不是字符串：

1. 在app.ts中导入所有需要跳转的页面

   import { GameSettingsPage } from '../pages/game-settings/game-settings';
   // 其他页面...
   
   export class MyApp {
     constructor(public navCtrl: NavController) {}
   
     moveToPage(pageClass: any) {
       this.navCtrl.push(pageClass);
     }
   }
   

2. 在页面中传递页面类
   首先在页面的TS文件中导入目标页面类，并定义一个属性：

   import { GameSettingsPage } from '../game-settings/game-settings';
   
   export class HomePage {
     public gameSettingsPage = GameSettingsPage;
   
     constructor(public appCtrl: App) {} // 注入App来获取根导航控制器
   }
   

   然后在HTML中传递这个类属性：

   <button ion-button color="light" (click)="appCtrl.getRootNav().moveToPage(gameSettingsPage)">One Player</button>
   

关键注意事项 #

• 无论哪种方案，都必须确保目标页面已经在app.module.ts的declarations和entryComponents数组中注册，否则Ionic无法识别并加载该页面。
• 方案一的页面映射表需要随着新增页面同步更新，避免出现找不到页面的错误。

这样修改后，你的可复用跳转按钮就能正常工作啦！

内容的提问来源于stack exchange，提问作者Kristiyan D Kovachev