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

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

我設計瞭如下結構。

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

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

起初我初始化服務selectedObject這樣。

selectedObject = totalObject;

然後，我像這樣在構造函數上初始化了Component的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]); 
    } 
}

來源

2017-04-24 Hyunjin Lee

而不是重新創建陣列，空它，推送新項目或始終引用wordService.selectedWords。我會選擇第二個選項。 –

@KasperZiemianek感謝您的評論！我理解第一個選項，但第二個選項中的「始終參考」是什麼意思？ –

@KasperZiemianek我用第一個選項，但它不工作。添加代碼。 –

您可以簡單地創建一個服務並將其用作「單件」服務。

@Injectable() 
export class DataService { 

    public selectedWords:string[] = []; 
}

你在你的應用程序的頂層提供它，這樣只有一個實例會在您的應用程序中使用：

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

Plunkr example

來源

2017-04-24 11:24:19 Supamiu

如果我明白你做什麼，你都試圖操縱的對象，通過引用，在兩個部件，用服務爲不大不小的經紀人，這樣的成分變化A到Object X將在組件B中可見。該服務或多或少只是用來存儲引用的地方。

您將獲得更多的穩定性，使之更容易調試，並使其有更多可擴展的，這樣的想法：

A組分，使更改對象X（它設有本身）。
組件A使用Object X的副本更新Service中的模型（這裏有幾個人稱爲單身人士，或更技術上正確的「管理實例」）。模型/服務現在擁有數據，但該數據沒有外部參考，可能會意外（或以其他方式）改變它。
必要時，服務會發送「髒數據」通知，該組件BCDE等等。正在傾聽。此通知包含新數據（這是「推送」）。
組件BCDE ...等。使用這些數據。它不依賴於其控制問題之外的參考，並且不與該服務密切相關。
任何其他需要修改其他組件使用的數據的組件，只是使用相同的機制。
任何其他想要從服務中獲取數據的組件，都可以從該服務的獲取方獲取它的副本（這是「拉」）。

我試圖做你在做什麼（很確定我們都有）。隨着時間的推移，這只是麻煩（特別是如果你把更多的組件投入混音）。使用通知/事件更全面，即使初始設置似乎更復雜。由於您只是使用通知/事件中的有效內容進行測試（容易在測試中觸發），因此您無需設置其他組件並使其修改目標組件中使用的服務/參考，因此測試更容易。

但是，是的，整個「一個單身人士參考一切都在看」的東西只是麻煩。

來源

2017-04-24 11:23:20

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

回答

相關問題