Question

我正在尝试从我的组件发送一个对象，该对象是从用户的输入到我的服务。

这是我的代码..

Sample.html

$('#box-04').load('../EXTREL_CONTENT/' + page + '.php');

Sample.ts

<ion-item>
  <ion-label color="primary">Subject</ion-label>
  <ion-select [(ngModel)]="attendanceSet.subject">
    <ion-option *ngFor="let subject of subjects" [value]="subject.title">{{subject.title}}</ion-option>
  </ion-select>
</ion-item>

<ion-item>
  <ion-label color="primary">Date</ion-label>
  <ion-datetime [(ngModel)]="attendanceSet.date" displayFormat="DDD MMM DD" pickerFormat="YYYY MM DD"></ion-datetime>
</ion-item>

<button ion-button block padding (click)="proceed(attendanceSet)">Proceed</button>

服务

public attendanceSet = {}

proceed(attendanceSet){
  this.navCtrl.push(CheckAttendancePage, {
    setData: attendanceSet
})

我要做的是从sample.html获取数据，稍后我将用它来定义“attendanceListRef”的路径，如“出勤/主题/日期”

有没有正确或替代的方法来做到这一点？的谢谢！

Answer 1

使用Angular将数据发送到Service非常简单。在这个例子中我会给你三个选项。

service.ts

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';

@Injectable()
export class MyService {
   // option 1: Using the variable directly
   public attendanceSet: any;

   // option 3: Using Ionic's Events
   constructor(events: Events) {
       this.events.subscribe('set:changed', set => {
          this.attendanceSet = set;
       });
   }

   // option 2: Using a setter
   setAttendanceSet(set: any) {
      this.attendanceSet = set;
   }
}

在Component中，您可以执行以下操作。

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';
// import your service
import { MyService } from '../../services/my-service.ts';

@Component({
  selector: 'something',
  templateUrl: 'something.html',
  providers: [MyService] // ADD HERE -> Also add in App.module.ts
})
export class Component {
   newAttendanceSet = {some Object};

   // Inject the service in your component
   constructor(private myService: MyService) { }

   proceed() {
     // option 1
     this.myService.attendanceSet = this.newAttendanceSet;

     // option 2
     this.myService.setAttendanceSet(this.newAttendanceSet);

     // option 3
     this.events.publish('set:changed', this.newAttendanceSet);
   }
}

基本上我推荐选项1或2. 3在我眼中被认为是不好的做法，但它仍然有效，如果您需要更新多个服务/组件的价值，有时可以提供很大的灵活性。

Answer 2

我尝试将attendanceSet保存在事件上，然后在服务上添加侦听器但不成功。似乎事件不适用于服务？我将侦听器添加到其他组件的原因是工作但不在服务上。

Ionic 3 - 从组件发送数据到服务

2 个答案: