如何在多个组件之间使用Angular 2的FormBuilder

首先,这是我的环境细节：
在Windows 10上运行,并运行ionic –version给我2.0.0-beta.35

这是我的package.json文件的一部分：

...
"@angular/common": "2.0.0-rc.3","@angular/compiler": "2.0.0-rc.3","@angular/core": "2.0.0-rc.3","@angular/forms": "^0.3.0","@angular/http": "2.0.0-rc.3","@angular/platform-browser": "2.0.0-rc.3","@angular/platform-browser-dynamic": "2.0.0-rc.3","ionic-angular": "2.0.0-beta.10","ionic-native": "1.3.2","ionicons": "3.0.0"
...

其次,这是涉及的两个主要文件：

insight.ts

import { Component } from '@angular/core';
import {NavController,NavParams} from 'ionic-angular';
import {
  REACTIVE_FORM_DIRECTIVES,FormBuilder,FormControl,FormGroup
} from '@angular/forms';
import { App,Insight } from '../../models';
import { InsightProvider } from '../../providers/insight/insight.service';
import { InsightImage,InsightLabel,InsightLink,InsightQuestion,InsightThought,InsightTodo,InsightVideo } from './shared';

@Component({
  templateUrl: 'build/pages/insight/insight.html',directives: [REACTIVE_FORM_DIRECTIVES,InsightImage,InsightVideo],providers: [App,InsightProvider,FormBuilder]
})
export class InsightPage {

  canAdd: boolean;
  showDetails: boolean;
  newInsight: Insight;
  insightForm: FormGroup;

  constructor(private insightProvider: InsightProvider,private params: NavParams) {
    this.insightForm = new FormGroup({
      type: new FormControl('',[]),todo: new FormControl('',checked: new FormControl(false,imageUrl: new FormControl('',link: new FormControl('',url: new FormControl('',label: new FormControl('',question: new FormControl('',answer: new FormControl('',title: new FormControl('',details: new FormControl('',});
  }

  ngOnInit() {
    this.canAdd = false;
    this.showDetails = true;
  }

  addNewInsight() {
    if (this.newInsight.type) {
      this.insightProvider.createInsight(this.newInsight)
      .subscribe(response => {
        this.newInsight.setId(response.data.id);
        this.newInsight.title = '';
        console.log(response);
      });
    }
  }

  deleteClicked(index: number) {
    console.log('Clicked on ' + index);
    this.insightProvider.deleteInsight(this.newInsight)
    .subscribe(data => {
      console.log(data);
    });
  }


}

insight.html

<form [ngFormModel]="insightForm" (ngSubmit)="createNewInsight()">
      <ion-item>
        <ion-label for="type">Insight Type</ion-label>
        <ion-select name="type" id="type" [formControl]="type">
          <ion-option value="label">Label</ion-option>
          <ion-option value="thought">Thought</ion-option>
          <ion-option value="link">Link</ion-option>
          <ion-option value="question">Question</ion-option>
          <ion-option value="todo">Todo</ion-option>
          <ion-option value="image">Image</ion-option>
          <ion-option value="video">Video</ion-option>
        </ion-select>
      </ion-item>

      <div [ngSwitch]="type">
          <insight-image [form]="insightForm" *ngSwitchCase="'image'"></insight-image>
          <insight-label [form]="insightForm" *ngSwitchCase="'label'"></insight-label>
          <insight-link [form]="insightForm" *ngSwitchCase="'link'"></insight-link>
          <insight-question [form]="insightForm" *ngSwitchCase="'question'"></insight-question>
          <insight-thought [form]="insightForm" *ngSwitchCase="'thought'"></insight-thought>
          <insight-todo [form]="insightForm" *ngSwitchCase="'todo'"></insight-todo>
          <insight-video [form]="insightForm" *ngSwitchCase="'video'"></insight-video>
      </div>

      <button type="submit" block primary text-center (click)="addNewInsight()" [disabled]="!newInsight.type">
        <ion-icon name="add"></ion-icon> Add Insight
      </button>
    </form>

正如您所看到的,我正在尝试将FormGroup对象传递给多个组件,以便我可以使用它们.

以下是其中一个组件的示例(现在是最小版本)：

<ion-item>
  <ion-label floating for="link">Link</ion-label>
  <ion-input type="text" name="link" id="link" [formControl]="link"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating for="url">URL</ion-label>
  <ion-input type="text" id="url" name="url" [formControl]="url"></ion-input>
</ion-item>

我现在面临的问题是这个错误：

我相信发生的事情是FormBuilder正在寻找我在我的打字稿文件中声明的给定名称(例如todo,imageUrl,link等),但由于它在我的其他组件中,它会出错,认为它不存在.

这个错误的原因是什么？我看过网上找不到相关问题.

仅供参考,我在组件中而不是在同一页面中需要它们的原因是因为将来每个输入的功能都不同,因此需要为每个组件提供“单一责任”.

提前致谢