Ionic返回按钮不显示求助：开发导航跳转页面时遇此问题

首先我先帮你补全一下截断的list.html代码（假设图片字段是bandera，还加了个国家名称的展示，让列表更完整）：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Paises</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- 给点击事件传个pais参数，方便跳转时带数据 -->
  <ion-card *ngFor="let pais of paises | async" (click)="cambiarPagina(pais)">
    <ion-item>
      <ion-avatar item-start>
        <img src="{{pais.bandera}}">
      </ion-avatar>
      <h2>{{pais.nombre}}</h2>
    </ion-item>
  </ion-card>
</ion-content>

接下来分步骤实现跳转功能，我以Ionic 3为例（如果是4+版本后面会补充说明）：

1. 配置导航控制器（NavController） #

打开对应的list.ts文件，先导入需要的模块，注入NavController，然后实现cambiarPagina方法：

import { NavController } from 'ionic-angular';
// 记得导入你要跳转到的目标页面，比如DetallePaisPage
import { DetallePaisPage } from '../detalle-pais/detalle-pais';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  paises: Observable<any[]>; 

  constructor(public navCtrl: NavController) {
    // 这里放你初始化paises数据的代码，比如从API或数据库获取
  }

  cambiarPagina(pais) {
    // 用push方法跳转，同时把当前点击的pais数据传过去
    this.navCtrl.push(DetallePaisPage, {
      paisInfo: pais
    });
  }
}

2. 目标页面接收跳转参数 #

跳转到的DetallePaisPage页面，需要用NavParams来获取传递过来的国家数据：

import { NavParams } from 'ionic-angular';

@Component({
  selector: 'page-detalle-pais',
  templateUrl: 'detalle-pais.html'
})
export class DetallePaisPage {
  currentPais: any;

  constructor(public navParams: NavParams) {
    // 获取传递过来的参数
    this.currentPais = navParams.get('paisInfo');
  }
}

3. 确保页面在App模块中注册 #

打开app.module.ts，把两个页面都加入声明和入口组件：

import { ListPage } from '../pages/list/list';
import { DetallePaisPage } from '../pages/detalle-pais/detalle-pais';

@NgModule({
  declarations: [
    MyApp,
    ListPage,
    DetallePaisPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ListPage,
    DetallePaisPage
  ]
})
export class AppModule {}

如果你用的是Ionic 4+版本 #

推荐用Angular Router来实现，代码稍微调整一下：

在list.ts里：

import { Router } from '@angular/router';

constructor(private router: Router) {}

cambiarPagina(pais) {
  // 带参数跳转到详情页
  this.router.navigate(['/detalle-pais', pais.id]);
}

然后在路由配置文件（比如app-routing.module.ts）里添加路径：

const routes: Routes = [
  { path: 'paises', component: ListPage },
  { path: 'detalle-pais/:id', component: DetallePaisPage }
];

最后在DetallePaisPage里用ActivatedRoute获取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  const paisId = this.route.snapshot.paramMap.get('id');
  // 用id去获取对应的国家数据
}

几个小提醒：

• 确保你的paises异步数据流是正常的，不然列表渲染不出来，点击事件自然也没用
• 跳转时传递参数是可选的，但如果需要在详情页展示对应国家的信息，这一步很必要
• 测试的时候可以在cambiarPagina里加个console.log(pais)，看看参数有没有正常传递

内容的提问来源于stack exchange，提问作者Jaime Cuellar