角度2の複数のコンポーネントを呼び出す必要があります

Question

角度2のプロジェクトを作成しようとしており、複数のコンポーネント間で呼び出しを行う必要があります。この

<ParentComponent> 
    <ChildComponent> 
     <ChildComponent 1> 
     </ChildComponent 1> 
    </ChildComponent> 
</ParentComponent> 

のようなものは、私は、コンポーネントの参照を使用して、親テンプレートからプロパティやメソッドにアクセスしようとすることでparentComponentにとChildComponent間で情報を共有しようとしています。 3つのコンポーネントすべてのフィールド名を1つのフォームで見ることはできますが、親フォームのchildComponentの値にはアクセスできません。

フォーム値：

Here is my plunker

私は、角2に新しいです、私たちはこれを行うことができますどのように私を助けてください。

Answer 1

あなたの親にあなたの全体の形を構築する必要があり、その後、ちょうど子供や孫にインナーFormGroupsを渡します。

<subapp-vendor #vendortest [vendorDetails]='myForm.controls.vendorDetails'></subapp-vendor> 

とformgroupのためにベンダーに@Inputを使用します：ベンダーのコンポーネントにvendorDetailsグループを渡し、

ngOnInit() { 
    this.myForm=this._fb.group({ 
     subAppName: ['', [Validators.required]], 
     vendorDetails: this._fb.group({ 
     buildType: [''], 
     primaryLang: [''], 
     product: this._fb.group({ 
      vendorName: [''], 
      productName: [''] 
     }) 
     }), 
     subAppType:['', [Validators.required]], 
    }); 
} 

そして、あなたの親から：だからあなたの親が全体のフォームを構築

@Input() vendorDetails: FormGroup; 

このビューのformGroup名と、親で定義したformcontrolnamesを使用します。ここではまた、あなたが親から行ったように、このchildcomponentの子コンポーネントにインナーformGroupを渡す：

<div [formGroup]="vendorDetails"> 
     <label>Built Type</label> 
     <div class="radio" *ngFor="let buildType of buildTypes"> 
     <label> 
      <input type="radio" formControlName="buildType" [value]="buildType.value"> 
      {{buildType.display}} 
     </label> 
    </div> 

    <subapp-product #producttest [product]="vendorDetails.controls.product"></subapp-product> 
    <label>Primary Language</label> 
    <input type="text" class="form-control" formControlName="primaryLang"> 
    </div> 

aaaand、その後の進路使用@Inputおよび製品コンポーネントのビューでformGroup productちょうど上記のような。ここで

はあなたforked plunker