需要在Angular 2中的多個組件之間進行調用

我正在嘗試創建一個角度爲2的項目，並且需要在多個組件之間進行調用。像這樣需要在Angular 2中的多個組件之間進行調用

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

我試圖用一個部件引用，並試圖從父模板訪問的屬性和方法，分享爲父級和ChildComponent之間的信息。我能夠在一個表單中看到所有三個組件的字段名稱，但無法訪問父表單中的childComponent的值。

形態價值：

Here is my plunker

我是新來的角2.請幫我如何才能做到這一點。

來源

2017-03-04 Niks

使用'@ output'裝飾http://learnangular2.com/outputs/ – Smit

您可以更新根據您的plunker例如您的文章**代替父..子。 child1 .. ** – Aravind

您需要在父項中構建整個表單，然後將內部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爲formgroup：

@Input() vendorDetails: FormGroup;

並在您的視圖中使用該formGroup名稱以及您在父級中定義的formcontrolnames。在這裏你還內formGroup傳遞給此childcomponent的子組件，就像你從父所做的：

<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

來源

2017-03-04 11:00:28 Alex

PS。我建議你改變你的題目和問題內容，因爲這是關於動態表格和父母 - >孩子 - >孩子的溝通。這是從目前的問題完全不同:) – Alex

謝謝它的工作:) – Niks

你是非常歡迎！ :)因爲它解決了你的問題，請考慮通過點擊這個答案的投票下的灰色滴答接受答案:) https://meta.stackexchange.com/a/5235 – Alex

需要在Angular 2中的多個組件之間進行調用

回答

相關問題