在这篇博客之前看到了这篇文章：
https://ionicacademy.com/pass-data-angular-router-ionic-4/

另外之前自己写的程序大多时候是传ID之类的，都是对象的某个属性，比较简单。

如果页面之间传递的是对象，那么应该怎么办呢？

/home/home.page.ts:

import { Component } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { DataService } from '../services/data.service';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  user = {
    name: 'Simon Grimm',
    website: 'www.ionicacademy.com',
    address: {
      zip: 48149,
      city: 'Muenster',
      country: 'DE'
    },
    interests: [
      'Ionic', 'Angular', 'YouTube', 'Sports'
    ]
  };
 
  constructor(private router: Router, private dataService: DataService) { }
 
  openDetailsWithState() {
    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }
}

编写页面：app/details/details.page.ts

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
 
  data: any;
 
  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.data = this.router.getCurrentNavigation().extras.state.user;
      }
    });
  }
 
  ngOnInit() { }
}

可以看到这个时候在两个页面之间传递数据用的是 NavigationExtras 。
这样的话，可以避免传递ID+后台数据查询的方法。更加高效。

QQ群交流IONIC移动开发：