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

Question

我有两个组件 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);
    }
}

Answer 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);
    }
}

Answer 2

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

DataModelClass{
  public someData;

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

Answer 3

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

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