DI抽象类实例，角度为5

Question

I have several components that should all get three services at the same time with the same instance injected. Then i want to "generate" a new instance of my class to inject the services another time and on and on...
My first thought was that it would be best to create an abstract class and inject all the services there. Any of my components would then extend the abstract class but this approach does not work.

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


}

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}];  // nur das letzte wird angezeigt
          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]  }];
        });
    }}

iI always get the ERROR that all my Services are missing in the gauge-component. But i dont want to declare them in app.module, because i need a new instance every time i inject the abstract class in all the components.

Answer 1

providers: [AbstractComponent] doesn't make sense and won't work as you expect. It will create a new instance of AbstractComponent class that can be injected, which is not desirable in any situation.

As of now, decorator annotations cannot be inherited . providers property should be pasted from AbstractComponent to Component annotation in all child classes.

For DRYer code the array can be exported and reused in all classes that require these providers:

export const DATA_PROVIDERS = [
    MqttdataproviderService, GeomqttdataproviderService, CoapdataproviderService 
];

...
@Component({
  selector: 'app-abstract',
  templateUrl: './abstract.component.html',
  providers: [DATA_PROVIDERS],
  styleUrls: ['./abstract.component.css']
})
...