Angular2 - 如何在組件之間共享數據/更改

因此，假設您有一個包含工具欄，邊欄和網格的界面。該工具欄有一個下拉菜單，當用戶更改時，側邊欄和網格中的內容會發生變化。回到Angular 1，我會使用服務來獲得我所有的動態數據。當服務中的某些內容發生變化時，使用該服務的所有組件也會更新。Angular2 - 如何在組件之間共享數據/更改

那麼在Angular 2中，它看起來像人們使用不同的方法。我想得到你的意見，哪個是首選的方式。

靜態服務
OnChanges
輸入和輸出

更新 - 16年3月9日

看起來像最好的解決方案就是線程蒂埃裏Templier發佈：Delegation: EventEmitter or Observable in Angular2

我剩下的問題是，如果最好的做法是爲組件之間共享的每個數據項創建新服務，或者我們只需要一個具有存儲所有共享數據的對象的服務。

See Plnkr for code

Original Plunker - 每一次變化都會有自己的服務

Revised Plunker for example - 只有一個服務存儲對象中的所有數據。一個類型將被傳遞給每個偵聽器，以檢查它是否需要根據該類型進行任何操作。

來源

2016-03-08 Marin Petkov

其他人提供了很好的答案，但要注意，是的一個部分關於[組件交互]的文檔（https://angular.io/docs/ts/latest/cookbook/component-communication.html）同樣值得一讀。 – jandersen

你可以利用這個共享服務。它可以包含數據和可觀察數據以供訂閱，以在數據更新時得到通知。

服務

export class ListService { 
    list1Event: EventEmitter<any> = new EventEmitter(); 

    getLists() { 
    return this.http.get(url).map(res => res.json()) 
     .subscribe(
     (data) => { 
      this.list1Event.emit(data.list1); 
     } 
    ); 
    } 
}

元器件

@Component({ 
    selector: 'my-component1', 
    template: ` 
    <ul> 
    <li *ngFor="#item of list">{{item.name}}</li> 
    </ul> 
    ` 
}) 
export class MyComponent1 { 
    constructor(private service:ListService) { 
    this.service.list1Event.subscribe(data => { 
     this.list = data; 
    }); 
    } 
}

自舉

bootstrap(AppComponent, [ ListService ]);

詳情請參見這個問題：

來源

2016-03-08 21:38:13

優秀的答案，但正如您已經鏈接到eventemitter或可觀察論壇所指出的，它看起來像可觀察是更好的方法。我現在就試試看看它是如何爲我工作的。 –

在您的使用案例中，我會使用服務。服務用於將其數據傳送給其他組件。一個組件可以將這些數據更新到服務中，另一個組件可以從中讀取數據。或者這兩個組件都可以從中讀取數據，而服務器本身從「外部世界」獲取數據。

您使用input將數據從父項傳遞給子項，並使用output將子項的事件輸出到父項。

使用ngOnChanges可以在組件本身發生某些變化時執行某些操作，但我更喜歡使用get()和set()函數。

至少，這是我的承擔:)

來源

2016-03-08 21:31:12 PierreDuc

感謝您對何時使用每一個的精彩描述。這對我來說將來非常方便。我將使用@Thiery提到的EventEmitter vs Observable線程中提到的Observable服務方法。 –

所以我有一個關於你何時使用事件vs ngOnChanges的描述的後續問題。假設我有一個使用共享的childComponent網格的父組件。通過共享，我的意思是多個其他組件使用這個網格來顯示他們自己的數據。所以如果我想讓父組件在這個子（網格）內部調用一個函數，但是隻有在這個實例中不是所有其他的，那麼ngOnChanges會是這種情況的最佳用法嗎？ –

Angular2 - 如何在組件之間共享數據/更改

回答

相關問題