ionic使用angluar页面之间的值传递

在Ionic中，可以通过以下几种方法实现页面之间的值传递：

1. 通过路由传参

在路由跳转时，可以通过queryParams或者state来传递参数，例如：

在源页面：

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

constructor(private router: Router) {}

goToDestinationPage() {
  const params = { id: 123, name: 'John' };
  this.router.navigate(['/destination'], { queryParams: params });
}

在目标页面：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params); // { id: '123', name: 'John' }
  });
}

2. 通过Ionic的NavController传参

在跳转页面时，可以通过NavController的navigateForward和navigateRoot方法传递参数，例如：

在源页面：

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

goToDestinationPage() {
  const params = { id: 123, name: 'John' };
  this.navCtrl.navigateForward('/destination', { queryParams: params });
}

在目标页面：

import { NavController, NavParams } from '@ionic/angular';

constructor(private navCtrl: NavController, private navParams: NavParams) {}

ngOnInit() {
  const params = this.navParams.get('queryParams');
  console.log(params); // { id: 123, name: 'John' }
}

3. 通过localStorage或者sessionStorage存储值

在源页面：

localStorage.setItem('userId', '123');

在目标页面：

const userId = localStorage.getItem('userId');
console.log(userId); // '123'

需要注意的是，这种方法可能会存在安全问题，因为存储在本地的数据可以被其他恶意网站或者插件访问和修改。

4. 通过Ionic的Events事件传递参数

在源页面：

import { Events } from '@ionic/angular';

constructor(private events: Events) {}

goToDestinationPage() {
  const params = { id: 123, name: 'John' };
  this.events.publish('destination:receivedParams', params);
}

在目标页面：

import { Events } from '@ionic/angular';

constructor(private events: Events) {
  events.subscribe('destination:receivedParams', (params) => {
    console.log(params); // { id: 123, name: 'John' }
  });
}

需要注意的是，这种方法只适用于父子页面之间的值传递，如果需要在非父子关系的页面之间传递值，需要使用其他方法。