Ionic 3 - 从组件向服务发送数据答案

【问题标题】：Ionic 3 - Sending data to service from componentIonic 3 - 从组件向服务发送数据
【发布时间】：2018-09-01 07:22:09
【问题描述】：

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

这是我的代码..

示例.html

<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>

Sample.ts

public attendanceSet = {}

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

服务

private attendanceListRef: AngularFireList<Attendance>

public setAttendance = {}

constructor(private db: AngularFireDatabase, private events: Events, public navParams: NavParams, private method: CheckAttendancePage){

    this.attendanceListRef = this.db.list<Attendance>('attendance/')

}

addAttendance(attendance: Attendance) {
    return this.attendanceListRef.push(attendance)
}

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

是否有任何适当或替代的方法可以做到这一点？ 谢谢！

【问题讨论】：

等等，你到底想做什么？您是否只想将attendanceSet 从Sample.ts 发送到Service？
是的，先生@Ivaro18
有什么办法可以解决或正确的方法吗？

标签： ionic-framework ionic3

【解决方案1】：

我尝试在事件上保存出勤集，然后在服务上添加侦听器，但没有成功。似乎事件不适用于服务？因为当我将侦听器添加到不同的组件时有效，但不在服务上。

【讨论】：

【解决方案2】：

使用 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 被认为是不好的做法，但它仍然有效，并且如果您需要更新多个服务/组件的值，有时可以提供很大的灵活性。

【讨论】：