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

Question

因此，假設您有一個具有工具欄，側邊欄和網格的界面。 工具欄有一個下拉列表，當用戶更改時，側邊欄和網格中的內容會發生變化。 回到Angular 1，我會使用Service來獲取所有動態數據。 當服務中的某些內容發生變化時，使用該服務的所有組件也將更新。

在Angular 2中，看起來人們正在使用不同的方法。 我希望得到您的輸入，這是首選方式。

• 靜態服務
• OnChanges
• 輸入和輸出

---

更新 - 03/09/16

看起來最好的解決方案是Thierry Templier發布的帖子： 委托：Angular2中的EventEmitter或Observable

我剩下的問題是，最佳做法是為組件之間共享的每個數據項創建新服務，還是只有一個服務具有存儲所有共享數據的對象。

See Plnkr for code

Original Plunker - 每次更改都有自己的服務

修改后的Plunker例如 - 只有一個服務將所有數據存儲在對象中。 將向每個偵聽器傳遞一個類型，以檢查它是否需要根據該類型執行任何操作。

Answer 1

您可以利用共享服務。 它可以包含要訂閱的數據和可觀察數據，以便在更新數據時得到通知。

• 服務

   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 ]); 

有關詳細信息，請參閱此問題：

• 委托：Angular2中的EventEmitter或Observable
• 委托：Angular2中的EventEmitter或Observable
• 在AngularJS 2中可以有兩個用於單個呼叫服務的模板

Answer 2

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

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

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

至少，這是我對它的看法:)