I have multiple components that require three services to be injected simultaneously with the same instance. After that, I need to create a new instance of my class for injecting the services repeatedly. My initial idea was to design an abstract class and inject all the services there. Then each component would extend the abstract class, but this approach did not work as expected.
Here is the abstract class:
import { Component, Injector } from '@angular/core';
import {GeomqttdataproviderService} from '../protocols/geomqtt/geomqttdataprovider.service';
import {MqttdataproviderService} from '../protocols/mqtt/mqttdataprovider.service';
import {CoapdataproviderService} from '../protocols/coap/coapdataprovider.service';
@Component({
selector: 'app-abstract',
templateUrl: './abstract.component.html',
providers: [
MqttdataproviderService, GeomqttdataproviderService, CoapdataproviderService
],
styleUrls: ['./abstract.component.css']
})
export class AbstractComponent {
protected GeomqttdataproviderService: GeomqttdataproviderService;
protected MqttdataproviderService: MqttdataproviderService;
protected CoapdataproviderService: CoapdataproviderService;
constructor(injector: Injector) {
this.GeomqttdataproviderService = injector.get(GeomqttdataproviderService);
this.MqttdataproviderService = injector.get(MqttdataproviderService);
this.CoapdataproviderService = injector.get(CoapdataproviderService);
}
}
Sample code for one of the consuming components:
import { Component, OnInit, Injector } from '@angular/core';
import {AbstractComponent} from '../../abstract/abstract.component';
@Component({
selector: 'app-gauge',
templateUrl: './gauge.component.html',
styleUrls: ['./gauge.component.css'],
providers: [
AbstractComponent
],
})
export class GaugeComponent extends AbstractComponent {
temp = [];
data = [
{
name: '',
value: ''
}
];
constructor(injector: Injector) {
super(injector);
this.CoapdataproviderService.msg$.subscribe(() => {
this.temp = [{name: this.CoapdataproviderService.coapform.addcoaptopicfilter, value: this.CoapdataproviderService.msg}];
this.temp = this.data;
this.data = [{name: this.CoapdataproviderService.coapform.addcoaptopicfilter, value: this.CoapdataproviderService.msg.slice(-1)[0] }];
});
this.GeomqttdataproviderService.geomsg$.subscribe(() => {
this.temp = [{name: this.GeomqttdataproviderService.geomqttform.addgeomqtttopicfilter, value: this.GeomqttdataproviderService.geomsg}];
this.temp = this.data;
this.data = [{name: this.GeomqttdataproviderService.geomqttform.addgeomqtttopicfilter, value: this.GeomqttdataproviderService.geomsg.slice(-1)[0] }];
});
this.MqttdataproviderService.msg$.subscribe(() => {
this.temp = [{name: this.MqttdataproviderService.mqttform.addmqtttopicfilter, value: this.MqttdataproviderService.msg}];
this.temp = this.data;
this.data = [{name: this.MqttdataproviderService.mqttform.addmqtttopicfilter, value: this.MqttdataproviderService.msg.slice(-1)[0] }];
});
}}
I keep encountering the error that all my services are missing in the gauge-component. However, I do not want to declare them in app.module because I require a fresh instance every time the abstract class is injected into all the components.