Ionic页面传参问题：从首页传递用户ID至用户详情页

没问题，我来帮你搞定在Ionic里点击用户名称跳转到详情页并传递对应参数的需求——完全不用依赖localStorage的会话ID，直接传递你点击的那个用户的ID和其他数据就行。下面分步骤给你修改方案：

1. 先修改首页的模板（home.html） #

你原来的代码是通过linky管道转成链接，现在直接给用户名绑定点击事件，把当前用户的完整数据传进去：

<p (click)="goToUserDetails(item)">{{ item.username }}</p>

解释：去掉linky管道（因为我们用点击事件跳转，不需要转成<a>标签），点击时把当前循环的item对象（包含uid、username等你需要的参数）传给跳转方法。

2. 在首页的逻辑文件（home.ts）里实现跳转传参 #

这里分两种情况，根据你的Ionic版本来选：

如果你用的是Ionic 4+（Angular路由）

首先导入Router，然后在构造函数注入，再写跳转方法：

import { Router } from '@angular/router';
// 其他必要的导入...

export class HomePage {
  // 你的现有变量：userDetails、resposeData等...

  constructor(private router: Router) { }

  goToUserDetails(user: any) {
    // 通过查询参数传递单个字段，适合简单数据
    this.router.navigate(['/user-details'], {
      queryParams: {
        uid: user.uid,
        username: user.username,
        // 这里可以加其他你需要传递的参数，比如user.age、user.email等
      }
    });

    // 如果你要传递完整的用户对象（不暴露在URL里），可以用state：
    // this.router.navigate(['/user-details'], {
    //   state: { userInfo: user }
    // });
  }
}

如果你用的是Ionic 3及更早版本

导入NavController，注入后用push方法跳转并传参：

import { NavController } from 'ionic-angular';
// 其他必要的导入...

export class HomePage {
  // 你的现有变量...

  constructor(public navCtrl: NavController) { }

  goToUserDetails(user: any) {
    this.navCtrl.push('UserDetailsPage', {
      uid: user.uid,
      username: user.username,
      // 其他需要的参数
    });
  }
}

3. 在用户详情页（UserDetailsPage）接收参数 #

同样对应你的Ionic版本：

Ionic 4+的接收方式

如果用查询参数，导入ActivatedRoute来获取：

import { ActivatedRoute } from '@angular/router';
// 其他导入...

export class UserDetailsPage implements OnInit {
  userId: string;
  username: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 订阅查询参数变化
    this.route.queryParams.subscribe(params => {
      this.userId = params['uid'];
      this.username = params['username'];
      // 拿到参数后就可以调用接口获取该用户的详情数据了
    });

    // 如果是用state传递的完整对象，这样获取：
    // const navigation = this.router.getCurrentNavigation();
    // const user = navigation.extras.state?.userInfo;
    // if (user) {
    //   this.userId = user.uid;
    //   this.username = user.username;
    // }
  }
}

Ionic 3及更早版本的接收方式

用NavParams获取传递的参数：

import { NavParams } from 'ionic-angular';
// 其他导入...

export class UserDetailsPage {
  userId: string;
  username: string;

  constructor(public navParams: NavParams) {
    // 直接从NavParams里取出参数
    this.userId = navParams.get('uid');
    this.username = navParams.get('username');
  }
}

这样修改后，你点击首页任意用户的名称，就能把该用户的ID和其他参数传递到详情页，完全不需要依赖localStorage里的会话ID，完美匹配你的需求～

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