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 类的新实例，这在任何情况下都是不可取的。

截至目前，decorator annotations cannot be inherited。 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']
})
...