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

Question

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

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

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

表单值：

Here is my plunker

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

Answer 1

您需要在 parent 中构建整个表单，然后将内部 FormGroups 传递给 child 和 grandchild。因此，您的 parent 构建了整个表单：

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

然后从您的 parent 将 vendorDetails 组传递给供应商组件：

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

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

@Input() vendorDetails: FormGroup;

并在您的视图中使用该 formGroup 名称以及您在 parent 中定义的 formcontrol 名称。在这里，您还将内部 formGroup 传递给此 child 组件的 child 组件，就像您从 parent:

所做的那样

<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

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

Need to make a call between multiple components in Angular 2

angular

plunker