需要在 Angular 2 中的多个组件之间进行调用

Question

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

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

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

表单值：

Here is my plunker

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

Answer 1

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

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