Ionic如何跨页面读取数据？首页面存储用户位置数据的获取方案

你已经在首页将位置数据存储到了Ionic Storage的locations键下，以下是3种常用的跨页面读取数据方式： #

方案1：直接在第二个页面读取Storage（最简单，适配你现有代码） #

你直接在第二个页面的TS文件中引入Storage，读取locations键的数据即可，示例代码如下：

// 第二个页面的typescript代码
import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import { UserLocation } from '你的UserLocation类路径';

@Component({
  selector: 'app-second-page',
  templateUrl: './second-page.page.html',
  styleUrls: ['./second-page.page.scss'],
})
export class SecondPagePage implements OnInit {
  locations: UserLocation[] = [];

  constructor(private storage: Storage) { }

  async ngOnInit() {
    // 先确保Storage初始化完成
    await this.storage.create();
    // 读取存储的位置数据
    this.locations = await this.storage.get('locations') || [];
    // 拿到数据后就可以在页面渲染或者做其他逻辑处理
  }
}

注意：如果你的UserLocation是自定义类，Storage存储的是序列化后的JSON对象，读取后是普通JS对象，如需还原为类实例，需要手动做实例转换。 #

方案2：路由传参（适合单次传递、数据量小的场景） #

如果不需要持久化存储，只是首页跳转到第二个页面时传递数据，可以直接通过路由带参传递：

首页跳转时传参代码： #

// 首页跳转方法里加这段
this.router.navigate(['/second-page'], {
  state: {
    locations: this.locations
  }
});

第二个页面接收参数代码： #

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

// 构造器里注入Router
constructor(private router: Router) {}

ngOnInit() {
  // 接收路由传递的数据
  this.locations = this.router.getCurrentNavigation()?.extras.state?.['locations'] || [];
}

方案3：创建共享服务（最规范，适合多页面频繁共享数据的场景） #

你可以创建一个公共的位置数据服务，所有页面都从这个服务读写数据，避免重复操作Storage：

1. 创建共享服务 #

运行命令生成服务：ionic generate service services/location

2. 服务代码示例 #

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import { UserLocation } from '你的UserLocation类路径';

@Injectable({
  providedIn: 'root'
})
export class LocationService {
  public locations: UserLocation[] = [];

  constructor(private storage: Storage) {
    this.initStorage();
  }

  private async initStorage() {
    await this.storage.create();
    this.locations = await this.storage.get('locations') || [];
  }

  // 保存位置数据
  async saveLocation(location: UserLocation) {
    this.locations.push(location);
    await this.storage.set('locations', this.locations);
  }

  // 获取位置数据
  getLocations() {
    return this.locations;
  }
}

3. 页面调用 #

首页和第二个页面都注入这个服务，直接调用getLocations()就能拿到数据，不需要每个页面都单独操作Storage。

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