Share data between sibling components using non-singleton service

Question

Using Angular, is there a way to share data between sibling components using a shared service, where that shared service is not a singleton?

The only way I can think of doing that is injecting a singleton service, and then using a hashmap in that singleton service to reference other class instances.

@Component({
  templateUrl: './sibling.component.html',
  styleUrls: ['./sibling.component.scss'],
})

export class Sibling1Component implements OnInit {

  displayMode: string = 'default';
  foo: Foo;


  constructor(private s: SharedSingletonService) {

    // I need to pass an id, but how
    this.foo = s.getInstanceOfFoo('some-uuid');

  }

  ngOnInit() {
  }

}

// the other sibling

@Component({
  templateUrl: './sibling.component.html',
  styleUrls: ['./sibling.component.scss'],
})

export class Sibling2Component implements OnInit {

  displayMode: string = 'default';
  foo: Foo;


  constructor(private s: SharedSingletonService) {

     // I need to pass an id, but how
     this.foo = s.getInstanceOfFoo('the-same-uuid-as-above');

  }

   ngOnInit() {
   }

}

// a helper class

export class Foo {

}

// the shared singleton service

@Injectable()
export class SharedSingletonService {

  foos : <{[key:string]:Foo}> = {}

  constructor(){

  }

  getInstanceOfFoo(id){
    if(this.foos[id]){
       return this.foos[id];
     }

    return this.foos[id] = new Foo();
  }

}

so the main question is - how can I use the same id in the sibling component instances, so that I can look up the same instance of foo in the shared service?

how about using a separate singleton service to share common id? — Paritosh, Feb 01 '18 at 06:28
yes that's what I am doing here, SharedSingletonService is the singleton, which creates multiple instances of Foo — Alexander Mills, Feb 01 '18 at 06:29
the problem is, I need to share the same id in both sibling components. that is, the id used to look up the shared Foo instance. — Alexander Mills, Feb 01 '18 at 06:29
the only way around this problem, I think, is to create child components programmatically, instead of declaratively with HTML — Alexander Mills, Feb 01 '18 at 06:31
that's what I am pointing to :) . create another service, use them in both component- which will be singleton, sharing the same id... sounds good? — Paritosh, Feb 01 '18 at 06:33
right, but the components aren't singletons either, they is an array of sibling1components and an array of sibling2components.. — Alexander Mills, Feb 01 '18 at 07:03
what is your use case for this? Angular can have service shared across components, not always need to be singleton. — Jecfish, Feb 01 '18 at 07:25
the problem is how to locate (get a reference to) the correct service instance — Alexander Mills, Feb 01 '18 at 07:32
in my case, there are many Sibling component instances, not just 2, and they are created dynamically — Alexander Mills, Feb 01 '18 at 07:32

score 1 · Answer 1 · edited Feb 01 '18 at 07:02

1

If your motive is just to share the id for the service...
Create another service,

import * as uuid from 'uuid';

@Injectable()
export class IdSharerService {

 id: string;

 constructor(){
     id = uuid.v4();
 }
}

Use it in both components

constructor(private idSvc IdSharerService, private sharedSvc: SharedSingletonService )
{       
   this.foo = s.getInstanceOfFoo(idSvc.id);
}

Hope this helps. You can use this NPM package to generate uuid: https://www.npmjs.com/package/uuid

edited Feb 01 '18 at 07:02

Alexander Mills

90,741
139
482
817

answered Feb 01 '18 at 06:36

Paritosh

11,144
5
56
74

yes, but the problem is this requires hardcoding the id - in my case, the id is dynamic because there are many instances of the child components – Alexander Mills Feb 01 '18 at 06:38
you can use this help https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript. Generating GUID in javascript – Paritosh Feb 01 '18 at 06:39
the NPM package I referenced is very good, can be used in the browser or in Node.js easily - https://www.npmjs.com/package/uuid – Alexander Mills Feb 01 '18 at 06:49
yep.. if that's comfortable to you, it's great. – Paritosh Feb 01 '18 at 06:59

Share data between sibling components using non-singleton service

1 Answers1

Linked