Ionic页面跳转后数据无法从TS传递至HTML问题求助

你已经搞定了列表渲染和点击事件触发，控制台也能正常输出数据，就差最后一步让目标页面展示数据啦！问题出在目标页面没正确接收并暴露传递过来的参数，我给你一步步梳理解决办法：

1. 给目标页面注入NavParams服务 #

首先在loadPaperPage对应的ts文件里，先引入并注入Ionic的NavParams服务，这是页面间传递参数的核心工具：

import { NavParams } from 'ionic-angular';

constructor(private navParams: NavParams) { }

2. 在目标页面中接收参数并暴露给HTML #

在目标页面的ts文件里，定义一个公共属性来存储传递过来的paper数据，然后在页面初始化时获取参数：

// 定义公共属性，让HTML模板能访问到
public currentPaper: any;

ngOnInit() {
  // 通过NavParams获取传递过来的参数，键名要和push时的一致
  this.currentPaper = this.navParams.get('paper');
  console.log('目标页面接收的paper数据:', this.currentPaper); // 先确认是否拿到数据
}

如果是Ionic 3及更早版本，也可以直接在构造函数里获取：

constructor(private navParams: NavParams) {
  this.currentPaper = this.navParams.get('paper');
}

3. 在目标页面HTML中绑定数据展示 #

现在就可以在目标页面的HTML里，通过刚才定义的currentPaper属性来展示数据了，比如：

<ion-content padding>
  <h3>{{currentPaper.paper.title}}</h3>
  <!-- 根据你的数据结构，展示其他字段 -->
  <p>作者: {{currentPaper.paper.author}}</p>
  <div>内容摘要: {{currentPaper.paper.summary}}</div>
</ion-content>

额外要检查的细节 #

• 确认参数键名完全匹配：你push页面时用的是{paper:paper}，所以获取时必须用navParams.get('paper')，大小写、拼写都不能错
• 核对数据结构：控制台打印的paper对象是不是嵌套的paper.paper.title结构？别在目标页面里写错了层级

按照这个流程操作后，目标页面就能正常展示传递过来的paper数据啦！

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