在 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 定义一个对象，并将其与 Form 1 和 Form 3 一起发送，并带有空值：

    type    Form2 = {
        columns : {
            col1 : string,
            col2 : string,
            col3 : string
        }
    };

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

但是，为我正在使用的许多表单（每个表单都有很多列）执行此操作确实需要我几天的时间。

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

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

但是，我无法弄清楚如何在 Ionic 2 的 Form 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 不是要在构造函数中设置的提供程序。