如何在 Ionic 中的组件之间共享数据 [关闭]

Posted 2023-02-23

【中文标题】如何在 Ionic 中的组件之间共享数据 [关闭]

【英文标题】：How to share data between components in Ionic [closed]

【发布时间】：2018-11-09 03:30:56

【问题描述】：

我有两个组件 category.ts 和 register.ts。 Category.ts 包含 category_id。我想将这些数据分享给 register.ts。我该怎么做。 category.ts

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';
import  RegisterPage  from '../register/register';
import  LoginPage  from '../login/login';


@Component(
  templateUrl: 'category.html'
  // selector: 'page-home',

)
export class CategoryPage 
    public category_id = 2;
    category:  Object[];
    constructor(public navCtrl: NavController) 
        this.category = [cid:1,cname:'Doctor',img:'../../assets/imgs/doctor.png',cid:2,cname:'Phsiotherapist',img:'../../assets/imgs/physiotherapist.png',cid:3,cname:'Medical Store',img:'../../assets/imgs/medicalStore.png']; 
    
    gotoRegister() 
      this.navCtrl.push(RegisterPage);
    

register.ts

import  Component from '@angular/core';
import  NavController  from 'ionic-angular';
import  ApiService  from '../../services/api.service';
import  LoginPage  from '../login/login';

@Component(
  templateUrl: 'register.html'
  // selector: 'page-home',

)
export class RegisterPage 
    public user:Object = ;
    constructor(public navCtrl: NavController,private validatorService: ValidatorService,private apiService: ApiService) 
    

    registerUser() 
     console.log(category_id);
    

【问题讨论】：

请说明这是一个离子问题。

【参考方案1】：

组件之间共有 4 种方式共享数据。

Four way to share data b/w component

我给你举例第四种方法。

您需要创建一项数据共享服务。

==> 数据共享.ts

import  Injectable  from '@angular/core';
import  BehaviorSubject  from 'rxjs/BehaviorSubject';
@Injectable()
export class DataSharingService 

  private someDataSource = new BehaviorSubject(null);

  currentSomeDataChanges = this.someDataSource.asObservable();

  constructor()  

  someDataChanges(data) 
    this.someDataSource.next(data);
  

将您的 category_id 保存在服务中

== >category.ts

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';
import  RegisterPage  from '../register/register';
import  LoginPage  from '../login/login';
import  DataSharingService  from 'data-sharing'

@Component(
  templateUrl: 'category.html'
)

export class CategoryPage 
    public category_id = 2;
    category:  Object[];
    constructor(
        public navCtrl: NavController,
        public data:DataSharingService
    ) 
        this.category = [cid:1,cname:'Doctor',img:'../../assets/imgs/doctor.png',cid:2,cname:'Phsiotherapist',img:'../../assets/imgs/physiotherapist.png',cid:3,cname:'Medical Store',img:'../../assets/imgs/medicalStore.png']; 

        this.data.someDataChanges(category_id);

    
    gotoRegister() 
      this.navCtrl.push(RegisterPage);
    

从服务中获取您的 cetegory_id

==> register.ts

import  Component from '@angular/core';
import  NavController  from 'ionic-angular';
import  ApiService  from '../../services/api.service';
import  LoginPage  from '../login/login';
import  DataSharingService  from 'data-sharing'

@Component(
  templateUrl: 'register.html'
  // selector: 'page-home',

)
export class RegisterPage 
    public user:Object = ;
    constructor(public navCtrl: NavController,private validatorService: ValidatorService,private apiService: ApiService,public data:DataSharingService) 
        this.data.currentSomeDataChanges.subscribe(categoryId => 
            console.log(categoryId)
        );
    

    registerUser() 
     console.log(category_id);
    

【参考方案2】：

您需要有一个数据模型类，您可以在其中使用 set 和 get 方法存储数据。你在 Category.ts 中设置数据，在 register.ts 中获取数据。

DataModelClass
  public someData;

  setSomeData(someData)
     this.someData = someData;
  
  getSomeData()
      return this.someData;
  

【参考方案3】：

您可以使用以下方法在 Angular 组件之间共享数据

使用 Angular 服务（简单的方法） 使用状态管理库，如NgRx