Angular 2，如何使用服務在組件之間共享數組數據？

Question

在Angular2中，使用服務在組件之間共享數組數據？

我將這種結構設計如下。

object structure
{
    data: 'data'
    keys: ['key1', 'key2', ... , 'keyN']
}

* Service has a array of total objects.
totalObject = [object1, object2, ... , objectN]

首先，我像這樣初始化服務的selectedObject。

selectedObject = totalObject;

然后，我像這樣在構造函數上初始化了組件B的selectedObject。

constructor(private wordService: WordService) {
     this.words = wordService.selectedWords;
}

首先，組件B正確顯示了所有對象！ 但是，當服務將新數組初始化為selectedObject時，組件B無法顯示所選對象。

---

 // It's not working...
 // remove
this.selectedWords.splice(0, this.selectedWords.length);

// add
for(let i in WORDS) {
  if(WORDS[i].keys.indexOf(key) >= 0) {
    this.selectedWords.push(WORDS[i]);
  }
}

Answer 1

如果我了解您要執行的操作，那么您將嘗試通過兩個組件之間的引用來操縱對象，並使用一種服務作為代理，以使組件A對對象X的更改在組件B中可見該服務或多或少只是存儲引用的地方。

您將獲得更多的穩定性，使其更易於調試，並使其更具可擴展性，請考慮以下方式：

• 組件A更改了對象X（它自己容納）。
• 組件A用對象X的副本更新服務中的模型（這里有人說這是一個單例，或更嚴格地說，是一個“托管實例”）。模型/服務現在具有數據，但是該數據沒有可以意外（或其他方式）對其進行突變的外部參考。
• 必要時，Service會分派BCDE ... etc等組件發送“臟數據”通知。 在聽。 該通知包含新數據（這是“推送”）。
• 組件BCDE ...等 使用該數據。 它不依賴於其控制范圍之外的參考，也不與該服務緊密耦合。
• 任何其他需要修改其他組件使用的數據的組件，都使用相同的機制。
• 任何其他想要從服務中按需獲取數據的組件，都可以從該服務的吸氣劑中獲取數據的副本（這是“拉”）。

我已嘗試做您正在做的事情（很確定我們都有）。 隨着時間的流逝，這只是麻煩（特別是如果您將更多組件添加到組合中）。 即使開始時看起來似乎比較復雜，但使用通知/事件更容易處理。 由於您只需使用通知/事件中的有效負載進行測試（在測試中輕松觸發），因此測試變得更加容易，您無需設置其他組件，也無需讓它修改目標組件中使用的服務/引用。

但是，是的，整個“每個人都在看一個單例的參考”只是麻煩。

Answer 2

您可以簡單地創建一個服務並將其用作“單個”服務。

@Injectable()
export class DataService {

  public selectedWords:string[] = [];
}

然后在應用程序的頂層提供它，這樣，整個應用程序將只使用一個實例：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, OtherComponent ],
  bootstrap: [ App ],
  providers: [ DataService ]
})
export class AppModule {}

Plunkr示例