Angular 8：使用同一服务的多个实例

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);
  }
}

Answer 1

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();
}