組件之間的Angular 2 Pass數據

Question

這是東西。 我有兩個組件需要交換數據。 假設組件1和組件2

在組件1中，我具有可變圖和方法loadGraph

 graph: any = new joint.dia.Graph;

 loadGraph(objectName, objectName2, objectCol1, objectCol2) {
    this.graph.fromJSON({... })
 }

在組件2中，我正在調用該方法

this.edit.loadGraph(objectName, objectName2, objectCol1, objectCol2);

現在，當我回到組件1並嘗試記錄圖形變量時，它沒有設置為任何值。 這意味着組件2沒有將任何數據傳遞給組件1。

我正在使用提供程序與組件進行通信。 在組件2中，我有這個：

import {Component1} from '....something';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  providers: [Component1]
})

export class Component2 implements OnInit {

  constructor(private edit: Component1) {

  };
}

我可能需要Child-Parent組件作為解決方案？ 如果是這樣，我的兩個組件看起來如何？

Answer 1

您需要在需要通信的組件的公共父節點上提供提供程序。 如果將其添加到每個組件的提供程序中，則每個組件實例將獲得其自己的服務實例，然后通信將無法進行，因為它們需要使用共享實例。

或者，您可以在@NgModule(...)提供服務。 這樣，單個實例便與整個應用程序共享。

Answer 2

@Gunter是正確的，但是我覺得如果您要開發的是企業級應用程序，那么將會有很多這樣的組件，您必須在這些組件之間傳遞數據，請查看redux體系結構中的ngrx-store或ng2-redux。

如果要檢查redux的工作方式，請在git hub中的這個倉庫上查看有關ngrx store的一個非常簡單的演示。

https://github.com/rahulrsingh09/AngularConcepts

Answer 3

...也許仍然與某人相關...

對我來說，您似乎想在Component2（父級）上的事件（如單擊按鈕）觸發的情況下，在Component1（子級）上調用方法。 要明確-“存在於DOM中”的子組件實例，對嗎？

您可以使用@ViewChild 。 您將獲得對Component1的引用，然后調用該函數。

如果父母/孩子的事情混在一起， 這可能是另一種選擇。

我不會provide組件，而只會services 。 是的，有可能，您可以使用@Injectable標記任何類（似乎即使沒有也可以使用），但是它決不是“來自DOM”的組件實例。 這將是“最近”提供的一個實例。 如果您在組件級別提供，則組件將獲得您的組件創建的新實例-如果所有子組件都使用依賴注入 ，則所有子組件將獲得相同的實例。

Answer 4

如果您在Component1(parent) Component2(child)內部具有Component2(child) ，則可以通過以下方法從Component1調用Component2的方法：

`http://plnkr.co/edit/KK9v0DZSrD0L2tN5EXzD?p=preview`