调用 Ionic 2 组件中的函数

Question

我正在开发一个具有多种形式的应用程序。其中一些表单非常非常大(50+ 字段)。允许用户填写一个或多个表单，提交表单后，生成的 JSON 将发送到 PHP 后端，后者将其转换为 CSV。

后端 PHP 服务不知道结构，它只是将每个 JSON 元素转换为列/值。

问题所在

目前，如果用户填写表单 1 和表单 4，则生成的 CSV 如下所示：

FORM 1,  ,  ,  FORM 3
Col1,Col2,Col3,Col1,Col2,Col3
Val1,Val2,Val3,Val1,Val2,Val3

我需要更改此设置，因此无论是否填写 FORM 2，其列都会以空值打印在 CSV 中。这样，CSV 输出将具有一致的结构。

可能的办法

我可以解决这个问题的一种方法是简单地为 FORM 2 定义一个对象，并将其与具有空值的表单 1 和表单 3 一起发送：

type    Form2 = {
columns : {
col1 : string,
col2 : string,
col3 : string
}
};
let form2Object = {
columns : {
col1 : '',
col2 : '',
col3 : ''
}
} as Form2;

但是，为我正在使用的许多表单执行此操作，每个表单都有许多列，实际上需要我花费数天时间。

我希望解决这个问题的第二种方法是简单地创建一个返回表单 2 值的函数，如下所示：

function returnFormTwo() {
return this.formTwo.value
}

但是，我无法弄清楚如何在 Ionic 2 中调用表单 2 组件中的函数？

我正在尝试这样的事情：

import { FormTwoPage } from '../pages/form-two/form-two';
constructor(public navCtrl: NavController, public navParams: NavParams, public appGlobal: AppGlobal, public formTwo: FormTwoPage) {}
ionViewDidLoad() {
let formTwoObj = this.formTwo.returnFormTwo();
}

我应该怎么做？

谢谢。

更新：这是FormTwoPage的外观：

@Component({
selector: 'page-form-two',
templateUrl: 'form-two.html'
})
export class FormTwoPage {
formTwo: FormGroup;
constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder, public toastCtrl: ToastController, 
public appGlobal: AppGlobal, public dataService: FormData, public modalCtrl: ModalController) {
this.formTwo = formBuilder.group({
col1: [''],
col2: [''],
col3: ['', Validators.compose([Validators.minLength(3), Validators.maxLength(40)])]
});
}
}

Answer 1

您可以使用ViewChild

import {ViewChild} from '@angular/core';
@ViewChild(FormTwoPage) 
formPage:FormTwoPage;
ionViewDidLoad() {
let formTwoObj = this.formPage.returnFormTwo();
}

确保returnFormTwo()public。

更新您没有注入到构造函数中的页面。FormTwoPage 不是要在构造函数中设置的提供程序。