Angular 8: Using multiple instances of the same service

Question

Does Angular 8 have an syntax change/upgrade for multiple instances of a service? Doing this will not work below, as they are still sharing the same service data,

I Saw an answer here, just curious if Angular 8 providers for different syntax,

Using multiple instances of the same service

export class ProductComponent implements OnInit {

  @Input() propertyViewDto: PropertyViewDto2;
  carMessage: any;
  foodMessage: any;

  public carData: arcData;
  public foodData: FoodData;

  constructor
    (
        private readonly carService: ProductService,
        private readonly foodService: ProductService..

  ngOnInit() {

         this.carService.currentMessage.subscribe(currentMessage => {
           this.carMessage = currentMessage;
           this.carData= this.carMessage.value;
         })

         this.foodService.currentMessage.subscribe(currentMessage => {
           this.foodMessage = currentMessage;
           this.foodData= this.foodMessage.value; 
         })

Product Service:

export class ProductService{

  private messageSource = new Subject();
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

If you're only needing this in one component you can set the `providers` value at component level and configure the service providers there, so every time the component is created, you'll get a new instance of the service. — dcg, Nov 07 '19 at 19:29

score 0 · Accepted Answer · answered Nov 07 '19 at 19:31

It is possible what you want, but not very descriptive though. Better would be to just make ProductService abtract and extend from it with a CarService and FoodService, and use those as providers.

If you however want it like you ask for, I suppose you can do this:

@Component({
  //...
  providers: [
    { provide: 'carService', useFactory: (/*deps*/) => new ProductService(), deps: [] },
    { provide: 'foodService', useFactory: (/*deps*/) => new ProductService(), deps: [] }
  ]
})
export class ProductComponent {
  constructor(
    @Inject('carService') private readonly carService: ProductService,
    @Inject('foodService') private readonly foodService: ProductService
  ) {}
}

Be aware though that any injected dependency provider from ProductService will be shared between these two. Which you can solve if necessary, by extending your factory

If the ProductService does not inject any providers (which I doubt), you can just use new ProductService() in your component:

@Component({
  //...
  providers: []
})
export class ProductComponent implements OnInit {
  private readonly carService = new ProductService();
  private readonly foodService = new ProductService();
}

hi, I was just seeing if there was any simpler syntax change in Anguar 8,thanks — , Nov 07 '19 at 20:03
hi, you might want to remove the second portion, it does not work, first answer part works for me, thanks ! — , Nov 08 '19 at 04:51
@SailorLuvBoat that 2nd part was, like mentioned, if you have no dependencies. If you however do have dependencies, than you can also inject those dependencies in the component's injector and pass them through the initialization of the `ProductService`. But that will be almost the same as the first part — Poul Kruijt, Nov 08 '19 at 08:14
hi @PierreDuc, thanks, I also have a question here, https://stackoverflow.com/questions/58762622/convert-observable-of-any-to-known-data-type , thanks — , Nov 08 '19 at 08:16

Angular 8: Using multiple instances of the same service

1 Answers1