Question

我有一个Mqtt服务，我可以从（几何和温度）获得一些实时数据。
的 MQTT-服务：

        import { Injectable } from '@angular/core';
        import {Paho} from '../../../../Own_paho_sript/geomqttws31';
        import {Subject} from 'rxjs/Subject';


        @Injectable()
        export class MqttdataproviderService {

          history = [
            {
              topic: '',
              timestamp: '',
              data: '',
              geometry: ''
            }
          ];

         mqttform = {

          addmqttadress: '',
          addmqttport: '',
          addmqttspatialfilter: '',
          addmqtttemporalfilter: '',
          addmqtttopicfilter: '',
          addmqttspatialrelation: '',
          addmqttusername: '',
          addmqttpassword: '',
          } ;

          private datamqtt = new Subject<any>();
          msg$ = this.datamqtt.asObservable();
          public msg = [];

         public constructor(private getformvaules: FormToClientService) {

         this.getformvaules.componentMethodCalled$.subscribe(
         () => {
         this.mqttform = this.getformvaules.addmqtt;
         this.methodToGetMyGeoData();
         });

         //to get live data and push the data in the history.
         this.methodToGetMyGeoData();
         }

          methodToGetMyGeoData() {
           // Methodes to subscrib and, connect to the paho 
            client

          this.client.onMessageArrived = (message: Paho.MQTT.Message) => {
              this.onMessage(message);
              this.history.push({
                'topic': message.destinationName,
                'timestamp': message.timestamp,
                'payloadstring': message.payloadString,
                'geometry': message.geometry
              });

          public onMessage(msg$: string) {
            this.geomsg.push(geomsg$);
            this.datageomqtt.next();

          }
          }

FormToClientService：

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class FormToClientService {


  addmqtt = {

              addmqttadress: '',
              addmqttport: '',
              addmqttspatialfilter: '',
              addmqtttemporalfilter: '',
              addmqtttopicfilter: '',
              addmqttspatialrelation: '',
              addmqttusername: '',
              addmqttpassword: '',
              } ;
  };


  //Observable string sources
  private componentMethodCallSource = new Subject<any>();

  // Observable string streams
  componentMethodCalled$ = this.componentMethodCallSource.asObservable();

  // Service message commands
  callComponentMethod() {
    this.componentMethodCallSource.next();
  }

  setMqtt (adress: string, port: any, spatial: string, temporal: any, topic: string, username: string, relation: string) {
    this.addmqtt.addmqttadress = adress;
    this.addmqtt.addmqttport = port;
    this.addmqtt.addmqttspatialfilter = spatial;
    this.addmqtt.addmqtttemporalfilter = temporal;
    this.addmqtt.addmqttspatialrelation = relation;
    this.addmqtt.addmqtttopicfilter = topic;
    this.addmqtt.addmqttusername = username;
    console.log('set');
  }

我通过Observables在4个不同的组件中订阅了历史数组。
1.在地图中，2。在数据表中，3。在仪表中，4。在线图中。它们都完全相同：

import {MqttdataproviderService} from '../../protocols/mqtt/mqttdataprovider.service';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css'],
})
export class DatatableComponent  {
  rows = [];
  columns = [
    { prop: 'topic' },
    { name: 'payloadstring' },
    { name: 'geometry' },
    { name: 'timestamp' }
  ];
  constructor(private mqttprovider: MqttdataproviderService) {
      this.mqttprovider.msg$.subscribe(() => {
      this.rows = this.mqttprovider.history;
      this.rows = [...this.rows];
    });
}

我在我的app.module中将MqttdataproviderService全局声明为单身，并且每个人都可以正常工作！

但现在我想创建MqttdataproviderService的几个实例或动态实例。我想要订阅几个主题，在地图组件或数据中同时显示来自不同主题的几何数据。
对于每个组件（地图，数据表，线图，......）都有一个自己的窗口。

我怎么能传递每个创建的MqttdataproviderService的实例？

Answer 1

Angular提供程序在其定义的注入器中具有单个实例。考虑到单例在这里是不需要的，它不应该是在注入时实例化的类提供者（默认类型）。

如果MqttdataproviderService类没有可注射的依赖项，则它不一定必须是提供者。它可以定义为值提供程序，主要是出于可测试性和可扩展性的原因：

{ provide: MqttdataproviderService, useValue: MqttdataproviderService }

如果它具有依赖关系，则应在实例化时手动提供它们：

mqttprovider: MqttdataproviderService;

constructor(
  @Inject(MqttdataproviderService) private _MqttdataproviderService: typeof MqttdataproviderService,
  formToClientService: FormToClientService
) {
  this.mqttprovider = new this._MqttdataproviderService(formToClientService);
}

如果知道MqttdataproviderService类具有可注射依赖项，则可以使用工厂提供程序：

export function mqttdataproviderServiceFactory (formToClientService: FormToClientService) 
  return () => return new MqttdataproviderService(formToClientService);
}

...
{
  provide: mqttdataproviderServiceFactory,
  useFactory: mqttdataproviderServiceFactory,
  deps: [FormToClientService]
 }
...

然后可以注入用于实例化MqttdataproviderService的工厂函数：

mqttprovider: MqttdataproviderService;

constructor(@Inject(mqttdataproviderServiceFactory) public mqttdataproviderServiceFactory: () => MqttdataproviderService) {
  this.mqttprovider = mqttdataproviderServiceFactory();
}

在这两种情况下，FormToClientService都是单身人士。如果这是不合需要的，则应以与MqttdataproviderService相同的方式处理。

angular 4，如何传递提供者实例

1 个答案: