Angular 2，如何使用服务在组件之间共享数组数据？

Question

In Angular2, Share Array data between components using service?

I'm designed this structure like below.

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

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

At first I initialized selectedObject of service like this.

selectedObject = totalObject;

Then I initialized selectedObject of Component B on constructor like this.

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

At the first, Component B displayed All objects correctly!! But, when the service initialize new array to selectedObject, Component B cannot display selected objects.

---

 // 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

If I understand what you're trying to do, you are trying to manipulate an object, by reference, across two components, with a service as sort of a broker, such that changes by component A to Object X will be visible in component B. The service more or less acts as just a place to stash references.

You will achieve a lot more stability, make it easier to debug, and make it a lot more extensible, thinking this way:

• Component A makes change to Object X (which it houses itself).
• Component A updates model in Service (which as several people here say, acts as a singleton, or more technically correct, a "managed instance"), with a copy of Object X. The model/service now has the data, but that data has no external reference that can accidentally (or otherwise) mutate it.
• When necessary, Service dispatches a "dirty data" notification, which Component BCDE...etc. is listening for. This notification contains the new data (this is "push").
• Component BCDE...etc. uses that data. It is not reliant on a reference outside of it's control concern and it is not tightly coupled to that service.
• Any other component that needs to modify data used by other components, just uses the same mechanism.
• Any other component that wants to get the data on demand from the service, can grab a copy of it from a getter on that service (this is "pull").

I have tried to do what you're doing (pretty sure we all have). Over time it's just trouble (especially if you throw more components into the mix). Using notifications/events is more staightforward all around, even if it might seem more complex to initially set up. It's easier to test since you just test with the payload from a notification/event (easily triggered in a test), you don't have to set up the other component and have it modify the service/reference used in the target component.

But yeah, the whole "one reference on a singleton everything is looking at" thing is just trouble.

Answer 2

You can simply create a service and use it as a "singleton" service.

@Injectable()
export class DataService {

  public selectedWords:string[] = [];
}

And you provide it at the top level of your application, this way only one instance will be used across your app:

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

Plunkr example