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']
})
...

DI抽象类实例，角度为5

1 个答案: