如何在Ionic v6 Angular页面间传递数据 接收后不展示如何解决

1 先修正基础传参拼写 #

你当前写的this.navCtrl.navigateforward存在拼写错误，正确写法为驼峰格式：

this.navCtrl.navigateForward(['post', {data: data}])

2 确认落地页参数接收逻辑正确 #

你使用的是Ionic Angular的路由传参方式，需要通过ActivatedRoute接收参数，正确接收示例：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 场景1：页面不会复用时，直接取快照值
  this.receivedData = this.route.snapshot.paramMap.get('data');

  // 场景2：页面可能复用时，订阅参数变化
  this.route.paramMap.subscribe(params => {
    this.receivedData = params.get('data');
    // 拿到参数后直接赋值触发更新
  })
}

3 已拿到参数但视图不渲染的排查方案 #

如果console.log已经能打印出接收到的参数值，但是页面没有展示，按以下两种场景处理：

• 场景A：传递的data是复杂对象/数组
  路由参数默认会转为字符串格式，复杂类型需要先序列化再传递，接收后反序列化：
  传参侧修改：

  this.navCtrl.navigateForward(['post', {data: JSON.stringify(data)}])
  

  接收侧修改：

  this.receivedData = JSON.parse(this.route.snapshot.paramMap.get('data'));
  

• 场景B：Angular变更检测未触发
  如果组件开启了ChangeDetectionStrategy.OnPush策略，或者赋值操作在异步回调中执行，需要手动触发变更检测：
  首先注入变更检测实例：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  

  拿到参数赋值后执行以下代码触发视图更新：

  this.receivedData = 你拿到的参数值;
  this.cdr.markForCheck();
  

4 额外检查项 #

确认模板绑定的变量名和你代码中赋值的变量名完全一致，大小写、拼写不要出现错误，比如代码中赋值为receivedData，模板不能写为recivedData或者receiveData。

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