需要在Angular 2

Question

我正在尝试制作一个角度2项目，需要在多个组件之间进行调用。像这样的东西

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

我试图通过使用组件引用并尝试从父模板访问属性和方法来在ParentComponent和ChildComponent之间共享信息。 我能够在一个表单中看到所有三个组件的字段名称，但无法在父表单中访问childComponent的值。

表格价值：

Here is my plunker

我是角色2的新手。请帮助我如何做到这一点。

Answer 1

您需要在父级中构建整个表单，然后将内部FormGroup传递给子级和孙级。所以你的父母建立了整个表格：

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

从您的父级，将vendorDetails组传递给供应商组件：

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

并在供应商中使用@Input作为表单组：

@Input() vendorDetails: FormGroup;

并在视图中使用该formGroup名称以及您在父级中定义的formcontrolnames。在这里，您还将内部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>

aaa然后当然在产品组件的视图中使用@Input和formGroup product，如上所述。

这是 forked plunker