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

我给你第4种方法。

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

<强> ==＆GT;数据sharing.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保存在服务中

==＆gt; 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

<强> ==＆GT; 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组件之间共享数据

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

如何在Ionic中的组件之间共享数据

3 个答案: