DI抽象类实例，角度为5

Question

我有几个组件，应该在注入相同实例的情况下同时获得三个服务。 然后我想“生成”我班的一个新实例，以不时地注入服务。
我的第一个想法是，最好创建一个抽象类并在其中注入所有服务。 然后，我的任何组件都将扩展抽象类，但是这种方法不起作用。

抽象类：

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


}

消耗组件之一 ：

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

我总是收到我的仪表组件中缺少所有服务的错误消息。 但是我不想在app.module中声明它们，因为每次在所有组件中注入抽象类时，我都需要一个新实例。

Answer 1

providers: [AbstractComponent]没有任何意义，也无法按预期工作。 它将创建一个可以注入的AbstractComponent类的新实例，这在任何情况下都是不希望的。

到目前为止， 装饰器注释不能被继承 。 providers属性应从所有子类的AbstractComponent粘贴到Component注释。

对于DRYer代码，可以将数组导出并在需要这些提供程序的所有类中重用：

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

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